code-prettifyをリファクタリングした

お急ぎの方は配付ページへどうぞ

Code Prettifyって？

/** このようなソースコードを書いておくだけで
 *  自動的に要素解析して
 */
public class Sample{
   // 色付けしてくれる
   public static void main(String[] args){
      // 便利なライブラリ
      System.out.println("です！");
   }
}

本家はGoogle系のようで、 JsDeliver上で配信されています。ブログ記事で技術的なものを投稿する際にコードの視認性を高めるために使っています。

改造しました

なぜ？

本家のプログラムを利用したところ、問題が発生しました。
クラス名の競合が発生し、コード装飾用のスタイルが私の定義したdiv要素に適用されてしまったのです

<!-- my HTML -->
<style>
div.tag { color:red }
</style>
<div class="tag">the tag div</div>

事象はブログのタグの箇所で発生したのですが、div要素につけたtagクラスが、 Code Prettifyの定義する「タグ要素」のスタイル.tag { color: #008}の影響を受けてしまったのです

どこを直した？

ソースがApacheLisence2.0の下、GitHubで公開されていたので、フォークして私のリポジトリとして修正を施しました

修正したのは2点

#1 自動生成するspanに割り当てるクラス名が単純すぎる

class="tag"とか、comとか。自分で定義するクラス名と被るリスクがありました

クラス名の先頭にpp-を付与しました。（PrettyPrintの頭文字を採ってPP）
これにより、class="pp-tag"やclass="pp-com"などになり、一般的なHTMLコーダーの方が定義するクラスと名称の競合の回避が、概ね可能になったと思われます

#2 スタイルの適用先が無制限だった

Code prettify を導入すると、.tagや.str,.com のような制限の無いスタイル定義がサイト全体に適用される状態でした。これは、<pre class="prettyprint">とは無関係な箇所にも影響していました。

Code prettify のスタイルシートを修正し、<pre class="prettyprint">の中のSPANタグにしか適用されないように制限をかけました

公開しています

私のサイト内に、スクリプトとスタイルシートを公開しています。
https://yui-kitamura.eng.pro/private/code-prettify/loader.html

使い方

私のサイトにてスクリプトとスタイルシートをホスティングしている形になります。
以下のサンプルコードのようにrunファイルへの参照を埋め込めば、あとは本家と同じように使えます

<head>
   <script src="https://yui-kitamura.eng.pro/private/code-prettify/loader/run_prettify.js?skin=default"></script>
</head>
<body>
   <!--?prettify lang=HTML?-->
   <pre class="prettyprint">
   your pre code here
   </pre>
</body>

CDNへの移譲などはあまり考えていませんが、よっぽどサイト全体でのアクセス比率が高まるようなら考えなきゃいけなくなるのかな？
GitHub上で任意ですが、利用中宣言をしてもらえると嬉しいです

自分が感じた不便を、プログラム改修を自力で適用して解決してしまう技術者DIYでした。 JavaとかCとかのキーワードの追加系プルリクが本家側に上がっているようだったので気が向いたら取り込んで更新してみようかな