Mono Works

チラシのすきま

hugo 単体でシンタックスハイライト適用

前回に続き、今回も hugo 0.28 で追加された機能について。

20170817-7-11-sunflower

0.28 以前は、Pygmentshighlight.jsを使ってシンタックスハイライトを適用する必要がありましたが、0.28 でデフォルトシンタックスハイライトとしてPygments機能を取り込んだ Chromaが採用され、hugo単体でシンタックスハイライトが可能になりました。

  • Pygmentsは、Pythonで書かれたシンタックスハイライト適用ライブラリで、これを利用するには Pythonの環境構築が必要
  • highlight.jsは、導入が簡単ですが、読み込む度に処理が走るのでパフォーマンスに影響する
  • Chromaは、Pygmentsを参考に Go言語で書かれたシンタックスハイライト適用ライブラリ

というわけで、うちも右へ倣えで導入しました。

Chroma syntax highlighter を有効に

設定ファイル(config.toml)に以下を追加すると、Pygments機能が有効になり、シンタックスハイライトが適用されます。

pygmentsUseClasses = true

さらに以下を追加すると、言語タグの付いた github-markdownのコードブロック(```)でも同じくシンタックスハイライトが適用されます。

pygmentsCodefences = true

シンタックスハイライト適用部分の CSSを用意

下記コマンドで、ハイライト表示用のCSSを生成して、所定の位置にファイルを配置

hugo gen chromastyles --style 選択スタイル名 > syntax.css

《選択スタイル名》は、こことかここを参照

CSSの指定

生成した CSSファイルを HTML の <head> 要素で指定

<link rel="stylesheet" href="/css/syntax.css">

markdownでの記法

シンタックスハイライトを適用するには、下記の shortcodeを使う。

※ markdown で shortcode をうまく表示できなかったので、このセクションは Gist の shortcode を利用して表示しています。

適用できる 《言語タグ》 は、ここで確認できます。

行番号を表示する場合、下記オプションを追加

特定行を強調したい場合、下記オプションを追加(スペースで区切り、ハイフンで範囲指定)

上で書いたように、pygmentsCodefences = trueオプションが付いていると、言語タグの付いた github-markdownのコードブロック(```)でも同じくシンタックスハイライトが適用されます。

行番号表示や特定行を強調しなければ、こっちの方が書き慣れてるので、普段はこっち使います。

以前の適用設定を削除

うちはこれまで highlight.jsを採用していたので、config.tomlから下記オプションを削除

highlightjs = "github"

あと、HTML要素に指定していた highlight.js の設定を削除

<!-- highlightjs -->
  {{ with .Site.Params.highlightjs }}
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/{{ . }}.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  {{ end }}

以上

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内