[Hugo] コードハイライトのオプション

Hugo のコードハイライト

当ブログでは Hugo のコードハイライトを使っています。

コードハイライトは

1$book = new Book();
2$book->title = $request->input('title');
3$book->summary = $request->input('summary');
4$book->save();

を

1$book = new Book();
2$book->title = $request->input('title');
3$book->summary = $request->input('summary');
4$book->save();

のようにカラーリングしてくれて、とても便利ですよね。

先日書いた記事で、行番号カウントを途中から出したい、というところがあって調べたらかんたんにできました。

Hugo コードハイライトのオプション

ドキュメントはこちらです。

行をハイライト

``` {linenos=table,hl_lines=[4]}
$book = new Book();
$book->title = $request->input('title');
$book->summary = $request->input('summary');
$book->save();
```

1
2
3
4

$book = new Book();
$book->title = $request->input('title');
$book->summary = $request->input('summary');
$book->save();

4 行目の　$book->save(); 背景が赤黒くハイライトされています。

コードの補足を入れる時にわかりやすいですよね。

ハイライトは、一度に複数の指定を入れることができます。

複数行を指定したり、

1hl_lines=[10 20]

範囲を指定したり、

1hl_lines=["5-10"]

組み合わせたり、

1hl_lines=["5-10" 20]

という感じです。

開始行を指定する

``` {linenos=table,linenostart=10}
$book = new Book();
$book->title = $request->input('title');
$book->summary = $request->input('summary');
$book->save();
```

10
11
12
13

$book = new Book();
$book->title = $request->input('title');
$book->summary = $request->input('summary');
$book->save();

通常、行番号は 1 から連番が振られますが、 linenostart をつけてあげると 指定の数字からスタートします。

長いコードの部分を示す時に便利ですね。

Hugo 0.60.0 以前の書き方

上記に掲載した書き方は Hugo v 0.60.0 以降で使えるようになったものです。

1$ hugo version

して、これよりも古いバージョンを使っている場合は古い書き方をするか、Hugo 本体のバージョンを上げると良いですね。

古い書き方は

``` {linenos=table,linenostart=10}
〜
```

だと

{{< highlight "linenos=table,linenostart=10" >}}
〜
{{< / highlight >}}

という感じになります。

Markdown の ``` と比べると、ちょっと冗長ですよね。

なお、 Hugo 本体を更新する場合は次をご覧ください。