Chroma Syntax Highlighting

Hugo 0.28 がリリースされた。

今回のアップデートの目玉は Golang 製の Chroma を組み込んで Syntax Highlight に対応したことだろう。 それまでは Pygments のようなツールを使うか highlight.js のようなスクリプトを噛ませるかだったのだが，ようやく Hugo が自前で用意できるようになった1。

Syntax Highlight の設定方法についてはマニュアルの以下のページが参考になる。

Syntax Highlight を有効にする

Chroma Syntax Highlight を有効にするには設定ファイル（config.toml 等）で以下の項目を有効にすればよい。

pygmentsUseClasses = true

さらにハイライト表示の CSS ファイルを用意する。 これは Hugo コマンドで生成できる。

$ hugo gen chromastyles --style=tango > chroma-styles.css

指定できる style の詳細は以下が参考になる。

もちろん，生成した CSS ファイルは HTML の <head> 要素内で指定すること。

<link rel="stylesheet" href="/css/chroma-styles.css">

ハイライト表示

Hugo でハイライトを指定するには以下の shortcode を使う。

{{< highlight go >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}
{{< /highlight >}}

実際の表示は以下の通り。

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

行番号を表示するには以下のように指定する

{{< highlight go "linenos=inline,linenostart=1" >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}
{{< /highlight >}}

1package main
2
3import "fmt"
4
5func main() {
6    fmt.Println("Hello, world!")
7}

特定の行を強調するには以下のように指定する。

{{< highlight go "linenos=inline,linenostart=1,hl_lines=5-7" >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}
{{< /highlight >}}

1package main
2
3import "fmt"
4
5func main() {
6    fmt.Println("Hello, world!")
7}

一方，設定ファイルで pygmentsCodeFences を有効にすることで GitHub Flavored Markdown の Syntax Highlight も使えるようになる。

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}
```
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

  1. いや，簡易的なものなら以前からあったのだが，吐き出すコードがイマイチで使う気にならなかったんだよねぇ。 ↩︎