HonKit のデフォルトテーマの箇条書きのスタイルを微調整した

HonKit とは Markdown からドキュメントページや書籍を作成するツールです。 GitBook という Deprecated になった OSS をフォークして作られたものみたいです。

honkit.netlify.app

Markdown を書くだけでドキュメントページを作れるので便利なんですが、箇条書きのスタイルが個人的に気になっていました。

上の図だと listing 1-1 の上下にスペースがあってやたら孤立していることや、 listing 2 と listing 2-2 より listing 2-2 と listing 3 の方が近接していて listing 2-2 が listing 3 と関連しているように見えることが気になるポイントでした。

幸いなことに HonKit は色々とカスタマイズできるので、箇条書きのスタイルをちょっといじってみました。

zenn.dev

やり方としてはだいたい上に貼ったリンクの通りなんですが、まず book.jsonstyles/website.css を用意します。 用意したら book.jsonstyles/website.css を読み込ませるような設定を書いて、 styles/website.css で書きたい CSS を書くだけです。

book.json

{
    "styles": {
        "website": "styles/website.css"
    }
}

styles/website.css

.markdown-section > ul > li {
    margin-bottom: 0.85em;
}

.markdown-section ul > li > p {
    margin-bottom: 0;
}

結果は以下の通り。

やったね。

ちなみに

この問題、この記事を書いた時点での最新バージョンである v3.6.19 では直っていて、僕が使っていたのは v3.4.1 でした。 説明にイマイチやる気がないのはこのせいです。