[Hugo] Syntax highlight

2016-08-20

Hugoでソースコードを綺麗に表示する

このサイトは特にたくさんのソースコードを記事に載せているが、ソースコードを綺麗に色付きで表示するには、HugoのSyntax hightlight機能を有効にする必要がある。しかし、Syntax Highlight機能をONにするだけで簡単に実現できなかったので記事にしておこうと思う。 さらに、Syntax Highlightの配色としてSolarizedを使いたかったのだが、これがそのままでは未対応だった。少し工夫が必要だったのでそれも書いておく。

公式の情報は下記の通り。Hugo V0.15以降で対応しているようだ。

Hugo – Syntax Highlighting

参考になった記事

hugo で Fence Code Blocks (```)を有効化する - Qiita

Syntax Highlight機能をONにする

1. config.tomlにSyntax Highlightの設定を３つ追加する。
2. ローカルで試すために、Pygmentsをインストールする。
3. Pygments-style-solarizedをインストールする。
4. solarizedlight用のcssファイルを用意する。
5. 記事にFenced Code Blockでソースコードを書く。

config.toml

config.toml

1:
2pygmentscodefences = true
3pygmentsstyle = "solarizedlight"
4PygmentsOptions = "linenos=table,nobackground=true"
5:

• config.tomlの先頭部分のどこかに上記３行を追加する。
• Syntax Highlightを有効にする場合、公式ページではpygmentsuseclasses = trueと書いてあるが、pygmentscodefences = trueが正しいようだ。
• pygmentsstyleでSyntax Highlightの配色を指定する。しかし、solarizedlightは未サポートなので、下記に示す対応が必要。
• PygmentsOptionsは必要なければ設定は不要。このサイトでは、行番号の表示と、背景色を無効にしている。
  • linenos=tableとすると、<table>タグを使って、行番号とコードが表示される。
  • nobackground=true
  • その他のパラメータはPygmentsのドキュメント参照

Available formatters — Pygments

※class LatexFormatterのパラメータが該当すると思われる。

Pygmentsをインストールする。

Hugoは記事のmarkdownファイル内にFenced Code Blockを見つけた場合、Pygmentsという外部ツールを使ってコードをSyntax Hightlight付きのHTMLに変換する。そのため、ローカル環境で記事を変換したり表示を確認したるする場合、Pygmentsをインストールしておく必要がある。 PygmentsのインストールにはPython 2.7が必要(手元の環境はPython V2.7.12, pip V8.1.2)。下記のようにしてインストールする。

1pip install Pygments

• Hugoコマンドを実行する前に入れておかないと大量のエラーが出る。

pygments-style-solarizedをインストールする

Pygmentsはインストールした直後の状態でsolarizedをサポートしていない。初期状態でサポートしている配色は下記のコマンドで確認できる。

1$ python -c 'from pygments.styles import get_all_styles; print list(get_all_styles())'
2['manni', 'igor', 'lovelace', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'algol_nu', 'paraiso-light', 'trac', 'default', 'algol', 'fruity']

そこで、pygments-style-solarizedをインストールする。

1pip install pygments-style-solarized

この後、再度配色を確認するとsolarizeddark, solarizedlightが追加されているのがわかる。

1$ python -c 'from pygments.styles import get_all_styles; print list(get_all_styles())'
2['manni', 'igor', 'lovelace', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'algol_nu', 'paraiso-light', 'trac', 'default', 'algol', 'fruity', 'solarizeddark', 'solarizedlight']

solarizedlight用のcssファイルを用意する

各配色のcssファイルは下記のコマンドで確認することができる。これを、solarizedlight.cssなどのファイルにリダイレクトで出力する。

1$ pygmentize -S solarizedlight -f html
2.hll { background-color: #ffffcc }
3.c { color: #93a1a1; font-style: italic } /* Comment */
4.err { color: #dc322f } /* Error */
5.g { color: #657b83 } /* Generic */
6:
7:

上記のようにして作ったcssファイルを、header部分のlayoutファイルで読み込むようにする。

layouts/partials/head.html

1:
2    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}/css/solarizedlight.css" />
3:

記事にFenced Code Blockでソースコードを書く

Syntax Highlightを行いたいソースコードの上下を、```で囲む。最初の```に続けて、ファイルのフォーマット(bash, html, javascript, coffeeなど)を書くと、Syntax hilightの機能が働く。(ファイルのフォーマット無しだと、単に書いた内容がそのまま出力されるだけ)