SIS Lab
>
Blog
>
HugoでのシンタックスハイライトにPython Pygmentsが不要となった

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

更新日:2022.08.31 作成日:2017.10.14

Hugo v0.28からPython Pygmentsに頼らず、Goの機能でシンタックスハイライトが可能になりました。これにより、シンタックスハイライトを行なっているコンテンツがあったとしても、キャッシュなしで高速なビルドができるようになっています。

Hugo | Hugo 0.28: High-speed Syntax Highlighting!

自分の場合は、config.tomlに以下のパラメータを指定しています。

Set to true to enable syntax highlighting in code fences with a language tag in markdown (see below for an example).

pygmentsCodefences = true # ```で囲んだコードをハイライトする設定
pygmentsUseClasses = true # <span stype="xxxx">で色付けをするのではなく、<span class="className">classで分ける

pygmentsUseClassesを有効にしているので、次のコマンドを実行して出てきたcssを自身のcssファイルに書き込みます。

--styleに指定するstyleは、 Pygments style gallery! から選ぶことができます。

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

/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
/* Error */ .chroma .ss4 { color: #960050; background-color: #1e0010 }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .s3e8 { color: #66d9ef }
/* KeywordNamespace */ .chroma .s3eb { color: #f92672 }
/* Name */ .chroma .s7d0 {  }
/* NameAttribute */ .chroma .s7d1 { color: #a6e22e }
/* NameClass */ .chroma .s7d4 { color: #a6e22e }
/* NameConstant */ .chroma .s7d5 { color: #66d9ef }
/* NameDecorator */ .chroma .s7d6 { color: #a6e22e }
/* NameException */ .chroma .s7d8 { color: #a6e22e }
/* NameFunction */ .chroma .s7d9 { color: #a6e22e }
/* NameOther */ .chroma .s7df { color: #a6e22e }
/* NameTag */ .chroma .s7e2 { color: #f92672 }
/* Literal */ .chroma .sbb8 { color: #ae81ff }
/* LiteralDate */ .chroma .sbb9 { color: #e6db74 }
/* LiteralString */ .chroma .sc1c { color: #e6db74 }
/* LiteralStringEscape */ .chroma .sc25 { color: #ae81ff }
/* LiteralNumber */ .chroma .sc80 { color: #ae81ff }
/* Operator */ .chroma .sfa0 { color: #f92672 }
/* Punctuation */ .chroma .s1388 {  }
/* Comment */ .chroma .s1770 { color: #75715e }
/* GenericDeleted */ .chroma .s1b59 { color: #f92672 }
/* GenericEmph */ .chroma .s1b5a { font-style: italic }
/* GenericInserted */ .chroma .s1b5d { color: #a6e22e }
/* GenericStrong */ .chroma .s1b60 { font-weight: bold }
/* GenericSubheading */ .chroma .s1b61 { color: #75715e }
/* Text */ .chroma .s1f40 {  }