livedoor Blog でシンタックスハイライトさせる (差分)

小ワザ CSS

はてブロにエントリーするギャグ。

基本は上のエントリー通りに実行すればほぼ OK なんですが、当エントリーポスト時デフォルトだと 5 行目と 10 行目にしかリスト番号が表示されない罠が。いつからそうなったのだろうか？

原因は参照している sunbrust.css 内にあるこの記述です。

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

ご丁寧に 5 行目と 10 行目以外はリスト番号が非表示になっておる。何故こんなことしたし。

で、冒頭の方式は Google Hosted Libraries から js と CSS を参照するタイプなので、CSS を直接いじることが出来ません。

なので list-style-type: decimal をプロパティに指定した同じ class 名をオーバーライドさせることにしました。

livedoor Blog は管理画面からテンプレートの CSS を編集できるので、自分の場合は記事本文をラップしてる article-body-inner を親クラスにし、ol.linenums li という子クラスを生やして対応。

.article-body-inner ol.linenums li {
    list-style-type: decimal!important;
}

これで全ての行にリスト番号が表示されるようになりました。