Markdown のカスタマイズ

zfb が Markdown をどうレンダリングするか、そしてパイプラインを設定・拡張する方法

zfb の Markdown パイプラインは zfb-content という Rust クレートにあります。各ファイルをパースし、visitor のチェーン（常時オンの Core に加えて、有効化した Opt-in 機能）を実行し、コードブロックを syntect でサーバーサイドにハイライトし、各エントリを生の body 文字列とすぐにレンダリングできる Content コンポーネントの両方として返します。

パイプラインが提供するものの全リスト — 常時オンの Core 機能、zfb.config.ts で有効化する Opt-in 機能、そして独自の visitor を in-tree で追加する方法 — については、Markdown Features カテゴリを参照してください。

ページ内で Markdown をレンダリングする

標準的なパターンは、paths() を通じてコンテンツエントリを受け取り、その Content コンポーネントをレンダリングすることです。

import { getCollection } from "zfb/content";

export function paths() {
  const posts = getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

export default function PostPage({ post }) {
  return (
    <article className="prose">
      <post.Content />
    </article>
  );
}

entry.Content は、zfb が Markdown からコンパイルする JSX コンポーネントです。syntect でハイライトされたコードブロックや、登録済みの独自ディレクティブを含む、MDX を意識した出力をレンダリングします。生の Markdown ソースだけが必要な場合（たとえば要約を計算したり RSS ジェネレーターに渡したりする場合）は、代わりに entry.body を使ってください。

拡張ポイント

zfb.config の plugins: [] フィールドは、ビルドオーケストレーション用のプラグインシステムです。登録された各プラグインは 4 つのオプションフックを公開します — setup、preBuild、postBuild、devMiddleware — それぞれ、起動時のインポートエイリアスや仮想モジュールの登録（setup）、ビルドと並行した追加ファイルの出力（preBuild）、ビルド後の検証の実行（postBuild）、開発サーバーへのルート追加（devMiddleware）といったタスクのためのものです。これらのプラグインは Markdown のレンダリングには関与しません。パースと visitor チェーンは Rust エンジンの内部で実行され、npm でインストールされたプラグインへコールバックすることはありません。

Markdown パイプラインのカスタマイズは、エンジン側で MdastVisitor / HastVisitor 実装として in-tree に存在します。Extending the Markdown Pipeline を参照してください。

関連項目

• Markdown Features — Core と Opt-in 機能の完全なカタログ。

• Custom Directives — DirectiveRegistry に新しいディレクティブ名を登録する。Rust 不要。

• Extending the Markdown Pipeline — Rust の visitor を書いてエンジンに組み込む。