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

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

更新日:2020.07.16 作成日:2017.10.14

Hugo 0.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 {  }

詳細は、下記ドキュメントを参照してください。 Hugo | Syntax Highlighting

それでは、よいHugo Lifeを。

スポンサーリンク
Load more

Related contents

TECH

2018.07.11

Hugoのテーマでsubmoduleを使う方法

TECH

2016.04.17

Hugo-ZenをベースにHugoのデザインを変えてみた

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

TECH

2017.08.31

Hugo Shortcodesの作り方

TECH

2017.04.09

gulpで画像の最適化

TECH

2017.03.19

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

TECH

2017.02.25

HugoのMarkdownでtarget='_blank'を実現する方法