hugo でシンタックスハイライトを追加した

こういう感じ

<?php
class SimpleClass
{
    // プロパティの宣言
    public $var = 'a default value';

    // メソッドの宣言
    public function displayVar() {
        echo $this->var;
    }
}

コードは PHP: クラスの基礎 - Manual より

テーマの編集

対応する Pull Request
Add syntax highlighting #1

シンタックスハイライト用の CSS を生成する。コマンドはこちらを参照のこと。/ style-name はここから好きなものを選べば良い。今回は manni を選んだ。

$ hugo gen chromastyles --style [style-name] > code.css

ついでにインラインコードの背景を manni と合わせた。

生成した CSS を static/css/ 以下に配置し、html から読み込みために header を編集する。

ローカルでビルドする場合はブログのソースに CSS を追加すれば良いと思う。今回は Github Actions でビルドしているため、テーマの方に追加した。その場合でもテーマに追加せず、ビルドスクリプト上で配置することも出来ると思う。

config.toml の編集

対応する Pull Request
シンタックスハイライト適用 #5

# シンタックスハイライトを有効に
pygmentsUseClasses = true
# github 風に ``` で囲む
pygmentsCodefences = true

ついでにシンタックスハイライト無しの pre の背景色も合わせた。

aaa
あああ

おわりに

ようやくコードを書けるようになった。余計な装飾はいらないが、必要な機能は欲しいというわがままな欲求はこうやって叶えていく。本筋とは関係ないが Github で管理すると機能追加した P/R をブログに載せれるので便利。