PIYO - Tech & Life -

Hugoブログのシンタックスハイライトに行番号をつける

このブログ、ソースコードを載せることが多いです。載せたコードについて書く時、◯行目とかいいたくなったので行番号を表示したいなと思いました。

でも、Hugoってどうやってソースコード出してるんだろう?ということで調べてみると、元々はPygments、現在はGo実装のChromaというのを使っているようです。

でも、色々設定を変えてみても変わらない。何かと思ったらRobustテーマはhighlight.jsを使っているようでした。

仕組みを変えると大変そうなので、この仕組のまま行番号を出せないかなと思い調べてみると、highlight.jsの行番号拡張みたいなのがあり、すごく楽に使えそうだったので導入しました。

まず、ベースの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はこんな感じ。

Before

After