zudo-doc
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

Admonitions Preset

作成 2026年5月28日更新 2026年7月24日Takeshi Takatsudo

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

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

標準プリセットに含まれます

zudoDoc() はこのアドモニションボキャブラリをデフォルトで有効にします — directives フィールドは標準の 7 種類(@takazudo/zudo-doc/directive-vocabulary-defaults)をデフォルト値として持ちます。個別の設定は不要です。

zfb.config.ts
import { defineConfig } from "zfb/config";
import { zudoDoc } from "@takazudo/zudo-doc/config";

export default defineConfig(
  zudoDoc({
    siteName: "My Docs",
  }),
);

defineConfig({ markdown: { features: { directives: {...} } } }) を直接書くと、プリセットの残り(githubAlerts、codeTabs、ruby など)が失われます。directives マップを上書きする場合でも zudoDoc({...}) を使ってください。エントリの追加・上書き方法は Directives Registry を参照してください。

構文

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

:::note

本文をここに書きます。

:::

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

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

本文。

:::

ライブデモ

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

Note

これは note です。中立的な補足情報に使います。

Tip

これは tip です。役立つアドバイスやショートカットに使います。

Info

これは info コールアウトです。文脈的な背景情報に使います。

Warning

これは warning です。読者が注意すべき事柄に使います。

Danger

これは danger コールアウトです。破壊的・不可逆な操作に使います。

Caution

これは caution コールアウトです。慎重に扱うべきリスクのある手順に使います。

クリックで展開

これは details ブロック — 折りたたみ可能な開閉領域です。本文は読者が展開するまで非表示のままです。

出力されるマークアップ

各ディレクティブは 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-noteadmonition-tipadmonition-warningadmonition-dangeradmonition-infoadmonition-caution)と対応する data-admonition 属性により、スタイルシートは各バリアントを個別に色分けできます。

メモ

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

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

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

  • ディレクティブを追加・上書きするには、zfb.config.tszudoDoc({...})directives マップを渡します。完全なパターンは Directives Registry を参照してください。

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

Revision History

Takeshi Takatsudo作成: 2026-05-29T01:46:14+09:00更新: 2026-07-25T02:53:02+09:00

AI Assistant

Ask a question about the documentation.

Preview theme

Loading theme previews…