ソースコードはtableで表現される

highlight.jsだけだと<code> ~ </code>内の文字列がspanで装飾されるだけでしたが、highlightjs-line-numbers.jsでは、それをtable要素で段組みして行頭に番号を付けています。

この際、一般のtableを装飾するcssを入れていると、それがソースコードにも反映されて表示が崩れます。

だからといって、tableのcssを消すわけにはいかないので、.hljs-lnのスタイルに、元々のtableの装飾を打ち消すようなスタイルの指定が必要です。

行番号の横に線を入れる

.hljs-ln-numbersにborder-rightを指定しましょう。

.hljs-ln-nにborder-rightを入れてしまうと、ソースコード内に全角文字があった場合に、線の行間位置に隙間が空いてしまいます。

ちなみに、行番号と線の間隔は.hljs-ln-numbersのpadding-rightで、線とコードの間隔は.hljs-ln-codeのpadding-leftで指定してやるとうまくいきます。

横スクロールで右側のpaddingがなくなる

1行が長い場合に横スクロールになるのですが、この際になぜか右側のpaddingがなくなります。

ネットで調べて擬似要素とか色々やってみたけど効果がなく、結局当サイトでは.hljs-ln-codeにpadding-rightを指定する形にしました。

iPhoneでフォントサイズが大きくなる

どうやらSafariのフォントサイズ自動調節機能が働いているみたいです。

body {
    -webkit-text-size-adjust: 100%;
}

こんな感じでbody要素に-webkit-text-size-adjust: 100%;を指定すればOKです。

参考