【HUGO】シンタックスハイライトのスタイルを変更する

デフォルトのハイライトが視認性が悪い

hugoで作られた当サイトのソースコードハイライトでコントラスト比の悪いところがあり、 見づらい箇所がところどころあるのでスタイルを変更したい。

例えば以下の箇所や

以下の箇所。

説明のためにシンタックスから外れた記述が特に見づらくなっている。

スタイル変更手順

config.tomlでpygmentsUseClassesをtrueにする

pygmentsUseClasses = true

cssを生成

cssを生成する。

保存先はstatic/css/syntax.cssとしておく。

$ hugo gen chromastyles --style=solarized-dark > static/css/syntax.css

styleオプションに指定するスタイル名はChroma Style Galleryから探す。

htmlを編集

headタグ内に以下を追加。

static/css/syntax.cssに保存したので/css/syntax.cssとしておく。

<link rel="stylesheet" href="/css/syntax.css" />

確認

シンタックス外の記述も視認性が良くなった。