zfb
GitHub リポジトリ

検索したい単語を入力

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

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 のこれまでの実質的な状態(テーブルのみ)からの 挙動の差分を最小限に抑えたものです。

zfb.config.ts
import { defineConfig } from "zfb/config";

export default defineConfig({
  // markdown.gfm を省略 — 保守的なデフォルトが適用される:
  // 打ち消し線 + テーブルは有効、それ以外はすべて無効
});

値の形式

markdown.gfm は 3 つの形式を受け付けます:

省略時(デフォルト)

フィールドを完全に省略する(あるいは markdown ごと省略する)と、上に示した 保守的なデフォルトになります。

真偽値のショートハンド

zfb.config.ts
export default defineConfig({
  markdown: {
    gfm: true, // すべての GFM 構文を有効化
  },
});

gfm: true は autolink literal・タスクリスト項目・脚注定義を含め、すべての構文を 有効にします。gfm: false は打ち消し線とテーブルも含めて、すべての構文を無効に します。

構文ごとのオブジェクト

zfb.config.ts
export default defineConfig({
  markdown: {
    gfm: {
      autolinkLiteral: true,
      taskListItem: true,
      // ここで省略した strikethrough・table・footnoteDefinition は
      // `false` ではなく保守的なデフォルトにフォールバックする
    },
  },
});

オブジェクトから省略したフィールドは、その構文の保守的なデフォルト値 (strikethrough: truetable: true、残りの 3 つは false)を保ちます。明示的に 設定したフィールドはそのまま尊重されます。

構文一覧

構文オブジェクトキー保守的なデフォルトレンダリング結果
打ち消し線 (~~text~~)strikethrough有効<del>text</del>
パイプテーブルtable有効<table>
autolink literal(素の https://example.comautolinkLiteral無効<a href="...">
タスクリスト項目 (- [x] / - [ ])taskListItem無効チェックボックス — 後述
脚注定義 ([^ref]: ...)footnoteDefinition無効脚注セクション — 後述

タスクリストのチェックボックス

taskListItem を有効にすると、各 - [x] / - [ ] 項目のチェック状態がチェック ボックスとしてレンダリングされます。項目自身の段落の先頭に disabled<input type="checkbox"> が挿入され、続けて半角スペースが 1 つ入ります。項目が チェック済みの場合のみ checked 属性が付きます。[x]/[ ] マーカーのない通常の リスト項目には影響しません。

チェックボックスが段落の 外側 ではなく 内側 に置かれるのは、ラベルと同じ行に レンダリングさせるためです。zfb は tight list の段落をアンラップしないため、<p> の兄弟要素としてチェックボックスを出力すると、テキストの上の行に単独で表示されて しまいます。

input
- [x] Done
- [ ] Not done
output
<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;
    }
input
Footnotes[^note] keep reading order.

[^note]: The footnote text.
output
<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 フレンドリー処理との関係

autolinkLiteralmarkdown.cjkFriendly(デフォルトで有効)と相互作用します。 CJK テキストに密着した素の URL は、そのままだと末尾の CJK の並びをリンクの href に飲み込んでしまいます。境界規則については CJK フレンドリーな強調 を参照してください。

関連項目

Revision History

作成更新