calendar

Hugoでコードをハイライト表示する方法

category Hugo
tag Hugo tag 設定
toc目次

はじめに

Hugoでコードをハイライト表示する方法のメモです。

Hugoのシンタックスハイライト

Hugoでは、組み込みの{{< highlight >}}ショートコードを使用するか、コードフェンスでハイライト設定を行うことでコードをハイライト表示できます。

📝 表示例

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

ハイライト表示

コードフェンスでハイライト表示する構文は以下のとおりです。

```言語 {オプション}
コード
```

{{< highlight >}}ショートコードを使用する場合の構文は以下のとおりです。

{{< highlight 言語 オプション >}}
コード
{{< / highlight >}}

[言語]にはコードに対応した識別子を記載します。
（C言語：C、JavaScript：jsなど）

※ 識別子についてはサポートしている言語を参照してください。

[オプション]にはハイライトショートコードのオプションを設定します。

ハイライト表示の主なオプションは以下のとおりです。

オプション 内容
lineNos=false 行番号を表示しない
lineNos=true 行番号を表示する
lineNoStart=N 先頭行の数字をNにする
hl_Lines=N N行目をハイライト表示する
hl_Lines=N-M NからM行目をハイライト表示する

ハイライト表示の例

以下は、Javaのコードで行番号を表示し、2-4行目をハイライトして先頭行を100する例です。

```java {lineNos=true, hl_Lines="2-4", lineNoStart=100}
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

上記のコードは、以下を出力します。

100
101
102
103
104

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

参考