このブログ、ソースコードを載せることが多いです。載せたコードについて書く時、◯行目とかいいたくなったので行番号を表示したいなと思いました。
でも、Hugoってどうやってソースコード出してるんだろう？ということで調べてみると、元々はPygments、現在はGo実装のChromaというのを使っているようです。
でも、色々設定を変えてみても変わらない。何かと思ったらRobustテーマはhighlight.jsを使っているようでした。
仕組みを変えると大変そうなので、この仕組のまま行番号を出せないかなと思い調べてみると、highlight.jsの行番号拡張みたいなのがあり、すごく楽に使えそうだったので導入しました。
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
まず、ベースのhtmlでスクリプトを読み込むようにします。元々highlight.min.jsがあったのでその次の行に入れました。
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>
そのすぐ下の<script>タグで実行します。
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad(); <-- この行を追加
</script>
ついでにカラーテーマをsolarized-darkからmonokai-sublimeに変更しました。
軽くcssで微調整をして完成です。Before/Afterはこんな感じ。
