2015年5月6日水曜日

google-code-prettifyをカスタマイズ

「google-code-prettify」でシンタックスハイライトできたのは良いけど、
「prettyprint linenumsクラス」の挙動がなんか変・・・。

こんな感じ・・・


5行ごとにしか行番号が表示されない・・・。

コードを解析してみると、「google-code-prettify」の仕様みたいですね。

毎行表示できた方が読みやすいので、
ちょっとカスタマイズしてみたいと思います。

表示をカスタマイズするには、一緒にアップロードした「prettify.css」を修正します。

これも難読化されているので探し難いですが、
560列目くらい(注:2013/3/4版)からの
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
をコメントアウト(/*...*/)します。
こんな感じ・・・
/*li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}*/

※Googleドライブ上のファイルを
 「修正⇒アップロード」するときはデスクトップアプリが便利です。
 ローカルで保存したファイルが自動的にアップロードされるので、
 アップロードの手間が省けます。
 ただし、間違えると表示が破綻するので慎重に。。。

では、見てみましょう。
こんな感じ・・・


できました!

-- 追記 --
前回のエントリーの「prettify.js」の件もですが、
難読化されているのは「google-code-prettify」のsmall版を使っているからです。
コードサイズがだいぶ違うので、読み込み量を考慮して、
私はsmall版を選択しましたが、中身はsmall版でも無記名版(small無し)でもどちらも一緒です。
Previous Post
Next Post

post written by: