Hugo Icarusテーマでhighlight.jsによるシンタックスハイライトをChromaに変更する

Hugo Icarus(Last Updated 2017-05-20)はしばらくメンテナンスされていない。 Hugoのシンタックスハイライトは現在Chromaを使うが、Hugo Icarus ThemeHighlight.jsを使っているのでChromaに変更する。

Pygmentsというpython製のシンタックスハイライトを参考にGo言語で作成したものがChromaだそうです。

config.toml への設定

Chromamarkdownで使うには下記の2行をconfig.tomlに追記します。

pygmentsUseClasses = true # style属性ではなくclass属性でスタイルを指定する
pygmentsCodefences = true # markdownのコードブロックをsyntaxhighlightする

styleの作成

下記のコマンドでシンタックスハイライト用のcssファイルが作成できます。

hugo gen chromastyles --style テーマ名 > 出力先のファイルパス

テーマ名の一覧は Chroma Style Gallery が見やすかったです。

黒背景のものが良かったので monokairrt で迷いました。 しかし、rrt を選んだらdiffに色が付かなかったりしたのです…なので monokai をベースにカスタマイズしよう、となりました。

Hugo Icarus テーマをカスタマイズ

(1) 既存のシンタックスハイライト用のcssを削除

rm hugo-icarus-theme/static/css/monokai.css

(2) chroma用のCSSを生成

hugo gen chromastyles --style monokai > themes/hugo-icarus-theme/static/css/chroma.css

(3) cssロード部分の修正

- <link rel="stylesheet" href="{{ "css/monokai.css" | absURL }}">
+ <link rel="stylesheet" href="{{ "css/chroma.css" | absURL }}">

(4) icarusが使っているhighlight.jsを除去

- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

(5) ハイライト処理の呼び出し部分も除去

- <script>hljs.initHighlightingOnLoad();</script>

(6) icarusのシンタックスハイライトの削除

themes/hugo-icarus-theme/static/css/style.csscodeセレクタと.highlightセレクタが icarusのhighlight.js用のstyleなのでこれを削除する。

(7) インラインコードとコードブロックのstyleをカスタマイズ

自由にどうぞ。以下はCSS例

code {
  font-size: 11pt;  
  font-family: 'Source Code Pro', Consolas, Monaco, Menlo, Consolas, monospace
}

:not(.chroma) > code { /* inline code */
  color: #666;
  padding: 2px 4px;
  background: #e9e9e9;
  border: 1px solid #fafafa;
}

.highlight { /* code block */
  margin: 0 -20px;
}

.highlight > pre { /* code block */
  padding: 10px 20px;
  overflow-y: auto;
}

テーマを tommorow-theme に変更した

monokai をカスタマイズしようと考えていたが、 Tomorrow Theme を使うことにした。

https://github.com/mozmorris/tomorrow-pygments/tree/master/csstommorow-night.css の内容を chroma.css にコピーして完了。

Share
関連記事