unitone に目次ブロックを追加するプラグイン unitone TOC をリリースしました。unitone ライセンスキーを契約中の方は、マイアカウントページからダウンロードできます。

デザイン

次のような目次を追加できます。

デフォルト

ブロックスタイル：1

ブロックスタイル：2

また、設定パネルで背景色や文字色、ボーダー、内側の余白等も設定できます。

CSS でのカスタマイズについて

マーカーとリンク文字列の間の余白やマーカーの色、項目間の余白などは CSS で調整できます。CSS カスタムプロパティで定義されているのでそれを上書きしてもらう形になります。

unitone-toc/src/blocks/toc/style.scss at main · inc2734/unitone-toc

Contribute to inc2734/unitone-toc development by creating an account on GitHub.

github.com

例えば、ブロックスタイル：2 を適用している場合にマーカーの背景色を変更したい場合は下記の CSS を追加してください。

.unitone-toc.is-style-toc-2 {
  --unitone--marker-background-color: red;
}