シンタックスハイライター「google-code-prettify」での行番号表示とCSSの修正

ソースコードを掲載するようなブログを書く際には入れておきたい"シンタックスハイライター"。

当ブログでは、Googleの「google-code-prettify」を使用しています。

google-code-prettifyにおける、一番簡単な下記の表示方法では行番号が表示されません。

<pre class="prettyprint">表示したいコード</pre>

ただ、デフォルトのprettify.jsに機能は実装されていますので、pre要素のclass属性にprettyprintと一緒に"linenums"を加えるだけで行番号を表示してくれるようになります。

<pre class="prettyprint linenums">
ここはコードの2行目
</pre>

ただ、元のスタイルが簡素なものなので、デザインを変更してみましょう。

prettify.css内の該当箇所を以下のように修正します。

デフォルトでは、5行目、10行目...のように5行おきに番号が振られます。

これを毎行、番号を添えるにはCSS内の下記箇所の「list-style-type」プロパティの指定を消せば大丈夫です。

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }

以下は、当ブログで使用しているスタイルです。参考になれば。

pre.prettyprint {
 margin: 0;
 padding: 0 0 0 25px;
 background-color: #FFF;
 border: 1px dotted #888;
}
ol.linenums {
 margin-top: 0;
 margin-bottom: 0;
 background-color: #FFF;
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
 padding-left: 15px;
 line-height: 1.5;
 border-left: 2px solid #6CE26C;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
 background: #F8F8F8;
}

関連するWeb制作・開発Tips

関連リンク