hugoでシンタックスハイライトに対応する

プログラミングに関するブログだとシンタックスハイライトは必須だと思うので，highlight.jsを入れました．

環境

• highlight.js 10.2.0

highlight.jsを読み込む

テーマ，バージョンを変更しやすいように，config.tomlに記載します．

対応している言語，テーマから選び，Gruvbox Darkならgruvbox-darkとします．

config.tomlに追加

[params]
  [params.highlight]
    version = "10.2.0"
    theme = "tomorrow-night-bright"

highlight.jsは，CDNで読み込んでいます．

layouts/partials/highlight.html

<!-- highlight.js -->
{{ with $.Site.Params.highlight }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ .version }}/styles/{{ .theme }}.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ .version }}/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ end }}

記事の中でしか使用しないと思うので，single.htmlで読み込みます．

layouts/_default/single.htmlに追加

{{ partial "highlight" . }}