はてな記法でソースコードに行番号を付けて3桁対応

　ブログで表示しているソースコードを、下のブログを参考に行番号を付けました。

note.z0i.net
Plane Note 様ありがとうございました。

動作チェックを各ページでしていたら、
「おや？2桁までしか表示できていない」

ということで、3桁表示に対応することにしました。

 

　 javascript と CSS を調べてみると、
番号表示は、単に ol の数字を、その後に線を表示しているだけだったので、
ol の表示枠を広げれば良いと気づきましたので、CSS で ol の左の余白を広げることに。

　pre.code ol 内に、
　　margin-left: 2.5em;
を追加しました。
足りなければ、この値を増やしてみてください。

　これだけです。

簡単でしたね！