テンプレートエンジン「Hugo」でScss記法のシンタックスハイライトを有効にする!


このブログは、HugoというGo言語製の静的テンプレートエンジンを使ってつくられています。

コードをよく載せるので、シンタックスハイライトを搭載したいなと思ったのですが、設定に右往左往したので手順のメモです。

公式ドキュメントが英語で困っている人も安心!是非参考にしてください。

手順

ざっくりいうと、python製のシンタックスハイライターPygments と prism.js の合わせ技で設定を行います。 別にpythonの知識は必要ないので、わからない方もご安心ください。

1.Pythonをインストールする

python.org

次の手順でpipコマンドを使うのに必要なのでpythonをインストールします。

2.Pygmentsをインストールする

python製のシンタックスハイライターPygmentsをインストールします。 ターミナルで以下のコマンドを叩きましょう。

pip install Pygments

これでOK。

3.ビルド設定を書く

config.tomlに下記の記述を追加

PygmentsCodeFences = true
pygmentsstyle = "default"
pygmentsuseclasses = true

4.prism.js の必要ファイルを落としてくる

http://prismjs.com/download.html

Compression levelはMinified でおk Themesは好きなやつ を選ぶ Language は自分が使うものにチェック 一番下までいって DOWNLOAD JS と DOWNLOAD CSS する 5.prismのファイルを読み込む baseof.htmlもしくはそれに順ずるpartialしたファイルで読み込みます。

<link rel="stylesheet" href="prism.css">
<script src="prism.js">

これで、コードフェンスで書いたものが有効になります。

6.記述する時はこんな感じで

```css
.class {
  display: block;
}
```

cssの部分は適宜Supported languagesを参考に。

Scss記法もバッチリです!

これで、Hugoでシンタックスハイライトが有効になりました!

prism.jsは他にもめちゃくちゃ機能があるのですが、シンタックスハイライトに関してはここまでです。

他の機能に関する詳しいことは、Prism.js公式ガイドラインをご確認ください!