Admonitions Preset

このプロジェクトが directives マップでアドモニションのボキャブラリを登録する方法。

zfb は汎用的なメカニズム（エンジン）として directives レジストリを提供します。このプロジェクトはアドモニションのボキャブラリ — note、tip、warning、danger、info、caution、details — をレシピとして登録し、コールアウトブロックに CommonMark Directives の ::: フェンス構文を使えるようにします。

// zfb.config.ts export default defineConfig({ markdown: { features: { directives: { note: "Note", tip: "Tip", info: "Info", warning: "Warning", danger: "Danger", caution: "Caution", details: "Details", }, }, }, });

構文

:::<type> フェンスで内容を囲みます。各フェンス行（開始の :::note と終了の :::）は、前後の内容との間に必ず空行を入れる必要があります。空行がないとパースに失敗し、ビルド時に警告が出ます。

:::note

本文をここに書きます。

:::

タイプの後に角括弧でラベルを付けると、アドモニションのタイトルになります。

:::tip[任意のタイトル]

本文。

:::

ライブデモ

以下の 7 つのディレクティブは、このアドモニションレシピによってライブで描画されています。

出力されるマークアップ

各ディレクティブは JSX 要素（例: <Note title="任意のタイトル">）にコンパイルされ、zudo-doc は次のように描画します。

<div data-admonition="note" class="admonition admonition-note">
  <p class="admonition-title">…</p>
  <div class="admonition-body">…</div>
</div>

タイプクラス（admonition-note、admonition-tip、admonition-warning、admonition-danger、admonition-info、admonition-caution）と対応する data-admonition 属性により、スタイルシートは各バリアントを個別に色分けできます。

メモ

• :::details タイプはレガシーな :::details title="Click me" 属性形式も受け付けます。

• :::caution はこのプロジェクトが登録するボキャブラリの一部です。:::warning が <Warning> を出力するのと同様に、<Caution>（data-admonition="caution"）を出力します。また caution は GitHub Alerts の > [!CAUTION] からも使用できるため、両方のパスで利用可能です。

• important は directives マップに含まれておらず、:::important としては使用できません。GitHub Alerts の > [!IMPORTANT] を通じてのみ利用でき、<Important> コンポーネント（data-admonition="important"）にマッピングされます。

• ディレクティブを追加・上書きするには、zfb.config.ts の directives マップに名前 → タイトルのペアを追加します。

• GitHub Alerts は > [!NOTE] 形式のブロック引用から同じアドモニションマークアップを出力します。両機能はクリーンに共存します。