Hugoでシンタックスハイライトを使う
HugoではGoldmarkとChromaが組み込まれており、デフォルトで以下のようなマークアップ関連の設定がされている。
ありがたいね。
[markup]
[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = false
hl_Lines = ''
hl_inline = false
lineAnchors = ''
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = 'monokai'
tabWidth = 4
wrapperClass = 'highlight'
ただしテーマ側のスタイルを使いたい場合は以下のように設定するが、これだとハイライトがされなくなってしまう。
[markup.highlight]
noClasses = false
テーマ側の設定を使いつつシンタックスハイライトをカスタマイズしたい場合は、
シンタックスハイライト用のCSSを作る必要がある。
と言っても以下のコマンドで作成できるので、めちゃ簡単にカスタマイズできる。
生成したCSSは assets/css/syntax.css に配置してあげればOK。
mkdir -p assets/css/;
hugo gen chromastyles --style=monokai > assets/css/syntax.css
Chromaの対応言語の一覧は以下で見れる。
250ぐらいの言語に対応しているらしいので、困ることは基本的になさそう。
Chromaで用意されているスタイルの一覧は以下で見れる。
ブログのテーマカラーに合わせて好きなものを選べば良さそう。
他の記事を読む