2018-10-16
Hugoでコードのシンタックスハイライトする場合のメモ
Hugo自体の機能を使う方法と、ハイライトする機能を持つjavascriptを読み込む2つの方法がある。
Hugo自体の機能使う
Hugo 0.28からGo機能でシンタックスハイライトが可能になった。
Syntax Highlighting
config.tomlに以下のように記述
pygmentsCodefences = true
pygmentsUseClasses = true以下のコマンドでcssを生成する。
$hugo gen chromastyles --style=monokai > syntax.css生成したcssをindex.htmlなどから読み込むと反映される。
--styleオプションの指定は、pygmentsから探す。
highlightjsを使う
highlightjs
対応言語が多いのがメリット。
以下のようにcdnからとってくるようにしておくと良い。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>一行目の記述を以下のように書き換えることでテーマを選択できる。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/zenburn.min.css">