GitHub Flavored Markdown (GFM)
markdown.gfm で GFM の 5 つの構文(打ち消し線・テーブル・autolink literal・タスクリスト・脚注)を設定する。
zfb の Markdown パイプラインは、markdown-rs パーサーが実装する GitHub Flavored Markdown (GFM) の 5 つの構文 — 打ち消し線、 テーブル、autolink literal、タスクリスト項目、脚注定義 — をサポートします。この 5 つのうちどれを有効にするかは markdown.gfm 設定キーで制御します。
保守的なデフォルト
markdown.gfm が指定されていない場合 — markdown ブロック全体を省略した場合も 含めて — zfb は 保守的なデフォルト を適用します。打ち消し線とテーブルは有効、 autolink literal・タスクリスト項目・脚注定義は無効です。これは GFM の全機能を 無条件に有効化するのではなく、zfb のこれまでの実質的な状態(テーブルのみ)からの 挙動の差分を最小限に抑えたものです。
import { defineConfig } from "zfb/config";
export default defineConfig({
// markdown.gfm を省略 — 保守的なデフォルトが適用される:
// 打ち消し線 + テーブルは有効、それ以外はすべて無効
});値の形式
markdown.gfm は 3 つの形式を受け付けます:
省略時(デフォルト)
フィールドを完全に省略する(あるいは markdown ごと省略する)と、上に示した 保守的なデフォルトになります。
真偽値のショートハンド
export default defineConfig({
markdown: {
gfm: true, // すべての GFM 構文を有効化
},
});gfm: true は autolink literal・タスクリスト項目・脚注定義を含め、すべての構文を 有効にします。gfm: false は打ち消し線とテーブルも含めて、すべての構文を無効に します。
構文ごとのオブジェクト
export default defineConfig({
markdown: {
gfm: {
autolinkLiteral: true,
taskListItem: true,
// ここで省略した strikethrough・table・footnoteDefinition は
// `false` ではなく保守的なデフォルトにフォールバックする
},
},
});オブジェクトから省略したフィールドは、その構文の保守的なデフォルト値 (strikethrough: true、table: true、残りの 3 つは false)を保ちます。明示的に 設定したフィールドはそのまま尊重されます。
構文一覧
| 構文 | オブジェクトキー | 保守的なデフォルト | レンダリング結果 |
|---|---|---|---|
打ち消し線 (~~text~~) | strikethrough | 有効 | <del>text</del> |
| パイプテーブル | table | 有効 | <table> |
autolink literal(素の https:) | autolinkLiteral | 無効 | <a href="..."> |
タスクリスト項目 (- [x] / - [ ]) | taskListItem | 無効 | チェックボックス — 後述 |
脚注定義 ([^ref]: ...) | footnoteDefinition | 無効 | 脚注セクション — 後述 |
タスクリストのチェックボックス
taskListItem を有効にすると、各 - [x] / - [ ] 項目のチェック状態がチェック ボックスとしてレンダリングされます。項目自身の段落の先頭に disabled な <input type="checkbox"> が挿入され、続けて半角スペースが 1 つ入ります。項目が チェック済みの場合のみ checked 属性が付きます。[x]/[ ] マーカーのない通常の リスト項目には影響しません。
チェックボックスが段落の 外側 ではなく 内側 に置かれるのは、ラベルと同じ行に レンダリングさせるためです。zfb は tight list の段落をアンラップしないため、<p> の兄弟要素としてチェックボックスを出力すると、テキストの上の行に単独で表示されて しまいます。
- [x] Done
- [ ] Not done<ul>
<li><p><input type="checkbox" disabled checked /> Done</p></li>
<li><p><input type="checkbox" disabled /> Not done</p></li>
</ul>これは 最小限の、GitHub 互換のチェックボックスレンダリング であり、GitHub の 完全なリファレンスマークアップではありません — <ul>/<li> に contains-task-list/task-list-item クラスは付与されず、チェックボックスは常に disabled です(クライアント側のトグルハンドラを持たない静的なサーバーサイド レンダリング出力のためです)。github.com 自身のレンダリング結果と差分を取る場合、 チェックボックス自体は一致しますが、周辺のマークアップはよりシンプルになる点に 注意してください。
脚注
footnoteDefinition を有効にすると、[^ref] 参照とその [^ref]: ... 定義が、 GitHub 自身の脚注の挙動と同様に、ドキュメント末尾に集約された脚注セクションとして レンダリングされます:
番号付け は 最初に参照された順 で行われ、定義のソース順ではありません — 先に書かれた定義でも、2 番目に参照されれば大きい番号が付きます。
ID は、定義には
user-content-fn-{slug}、参照にはuser-content-fnref-{slug}が使われます。{slug}は見出しアンカーと同じ方法で 脚注ラベルをスラグ化したものです(ASCII のケースフォールディング、句読点の除去、 CJK などの非 ASCII 文字はそのまま保持)。ラベルが空文字列にスラグ化される場合 (例:[^!!!])は、代わりに脚注の 1 始まりの番号にフォールバックします (user-content-fn-1)。繰り返し参照 される同じ定義は 1 つの番号を共有しますが、それぞれが独自の バックリファレンス ID を持つため、定義側からクリックされた特定の出現箇所へ リンクバックできます。
重複した定義 は同じラベルであれば 1 つに集約されます — 最初の定義が採用され、 以降の定義は黙って破棄されます(CommonMark の重複リンク参照定義のルールと同じ です)。
参照されない定義 は何もレンダリングされません — 番号付けは参照順に基づくため、 誰も参照しない定義には並び順における居場所がありません。
セクションには
data-footnotesが付与され、"Footnotes" と読み上げられる 視覚的に非表示のrole="heading"ランドマーク(実際の<h2>ではなく<div>— 本物の見出しタグだと zfb 自身の見出しアンカー/TOC プラグインに検出されて 書き換えられてしまうため)が含まれます。参照リンクとバックリファレンスリンクは どちらも GitHub のマークアップと同様のアクセシビリティ属性 (aria-describedby/aria-label)を持ちます。このランドマークを視覚的に隠しているのは、併記されている
sr-onlyクラスでは なく インラインstyleです。zfb は.sr-onlyを定義するスタイルシートを 同梱していません。またこのクラスは zfb 自身が出力するもので、Tailwind が走査 するファイルには一切現れないため、Tailwind のsr-onlyユーティリティも生成 されません。つまりクラスだけに頼ると、ほとんどのプロジェクトでランドマークが そのまま表示されてしまいます。クラス自体はスタイリング用のフックとして残して あります。逆に見出しを表示させたい場合は、インラインスタイルを!importantで上書きしてください:.footnotes [role="heading"] { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; }
Footnotes[^note] keep reading order.
[^note]: The footnote text.<p>Footnotes<sup><a href="#user-content-fn-note" id="user-content-fnref-note" data-footnote-ref aria-describedby="footnote-label">1</a></sup> keep reading order.</p>
<section data-footnotes class="footnotes">
<div role="heading" aria-level="2" class="sr-only" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0" id="footnote-label">Footnotes</div>
<ol>
<li id="user-content-fn-note">
<p>The footnote text.</p>
<a href="#user-content-fnref-note" data-footnote-backref aria-label="Back to reference 1">↩</a>
</li>
</ol>
</section>CJK フレンドリー処理との関係
autolinkLiteral は markdown.cjkFriendly(デフォルトで有効)と相互作用します。 CJK テキストに密着した素の URL は、そのままだと末尾の CJK の並びをリンクの href に飲み込んでしまいます。境界規則については CJK フレンドリーな強調 を参照してください。
関連項目
Markdown 機能 — 機能の全体マップ。
CJK フレンドリーな強調 —
autolinkLiteralと CJK 境界の 相互作用。