シンタックスハイライト

はじめに

Hugoでは、Chromaを使った、シンタックスハイライトを利用することができます。

設定

設定項目

以下の設定を、設定ファイルで行うことができます。設定には、コードブロック毎に個別に設定を変更でいるものがあります。

項目 意味 設定値 デフォルト値 個別設定
anchorLineNos 行番号にアンカータグをつける。アンカーをくくる span タグのidに行番号が設定される。 true/false false ✔
codeFences コードフェンス(```)でシンタックスハイライトを有効にする。 true/false true
guessSyntax 言語を自動推測するか。 true/false false
hl_Lines 指定した行番号をハイライト表示する。 数値。
複数指定する場合はスペースで区切る。
連続した範囲は ‘-‘でつなげる。
lineNoStartの設定には依存せず、1から始まる。		 ✔
lineAnchors 行番号にアンカータグをつける際の、id のプレフィックス。設定値-行番号というidになる。 文字列 ✔
lineNoStart 行番号の開始番号。 数値 1 ✔
lineNos 行番号をつけるか。 true/false/table/inline。 false ✔
lineNumbersInTable 行番号をテーブル形式にするか。 true/false true ✔
noClasses classを利用しないか。 true/false true
style 表示スタイル。 設定値 monokai
tabWidth タブ幅。 数値。 4
pygmentsUseClasses classを利用するか。 true/false false

設定ファイル(TOML)での、デフォルト値は以下の通りです。pygmentsUseClassesだけは、記載位置が違うので、注意してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

pygmentsUseClasses = false
[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4

pygmentsUseClassesとnoClasses

i
この部分はHugoのドキュメントを基にしたものではなく、設定値を変更して動作の確認をしたものです。

pygmentsUseClassesとnoClassesの関係がよくわからなかったので、動作の確認をしました。

pygmentsUseClasses noClasses 動作
true true classを利用する。
true false classを利用する。
false true classを利用しない。 styleが有効になる。
false false classを利用する。

CSSの作成

classを利用する際に利用するCSSを生成するには、以下のコマンドを実行します。styleに設定する値は、設定値を参照してください。

1

hugo gen chromastyles --style=monokai > syntax.css

記述方法

シンタックスハイライトを利用するには、ショートコードを利用する方法と、コードフェンスを利用する方法があります。コードフェンスを利用する場合は、codeFencesをtrueに設定している必要があります。

ショートコードを利用する

highlightというショートコードが用意されています。書式は以下の通りです。オプションは省略可能です。言語は、利用可能な言語を参照してください。

1
2
3

{{< highlight 言語 オプション>}}
// code
{{< /highlight >}}

例えば、以下のように記述すると、

1
2
3
4
5
6
7
8

{{< highlight c "linenos=table,hl_lines=3">}}
#include <stdio.h>

int main() {
    printf("Hello World.\n");
    return 0;
}
{{< /highlight >}}

このように出力されます。

1
2
3
4
5
6

#include <stdio.h>

int main() {
    printf("Hello World.\n");
    return 0;
}

コードフェンスを利用する

コードフェンスを利用する際は、以下のように記述します。オプションの指定方法が少し異なります。

1
2
3

```言語 {オプション}
// code
```

例えば、以下のように記述します。

1
2
3
4
5
6
7
8

```c {linenos=table,hl_lines=[3]}
#include <stdio.h>

int main() {
    printf("Hello World.\n");
    return 0;
}
```

codeFencesがfalseの場合でも、通常のマークダウン同様、<pre><code></code></pre>を利用したHTMLが出力されます。

最終更新日

November 28, 2021

inserted by FC2 system