HonKit のデフォルトテーマの箇条書きのスタイルを微調整した
HonKit とは Markdown からドキュメントページや書籍を作成するツールです。 GitBook という Deprecated になった OSS をフォークして作られたものみたいです。
Markdown を書くだけでドキュメントページを作れるので便利なんですが、箇条書きのスタイルが個人的に気になっていました。
上の図だと listing 1-1 の上下にスペースがあってやたら孤立していることや、 listing 2 と listing 2-2 より listing 2-2 と listing 3 の方が近接していて listing 2-2 が listing 3 と関連しているように見えることが気になるポイントでした。
幸いなことに HonKit は色々とカスタマイズできるので、箇条書きのスタイルをちょっといじってみました。
やり方としてはだいたい上に貼ったリンクの通りなんですが、まず book.json
と styles/website.css
を用意します。
用意したら book.json
に styles/website.css
を読み込ませるような設定を書いて、 styles/website.css
で書きたい CSS を書くだけです。
book.json
{ "styles": { "website": "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 でした。 説明にイマイチやる気がないのはこのせいです。