Vercel Labs⁠Markdownの表示⁠操作体験を定める仕様案「MDXG」提案

Vercel LabsのChris Tate氏は2026年5月11日、Markdown文書をアプリケーションやエディターがどのように表示し、操作できるようにするかを定める仕様案「Markdown Experience Guidelines(MDXG⁠⁠」をGitHubで公開したことを案内した。この仕様はmdxg.orgでも見ることができる。

MDXGは、Markdown文書を解析したあとの表示や操作体験を定義する仕様であり、CommonMark、GitHub Flavored Markdown(GFM⁠⁠、MDXのような既存のMarkdown構文を置き換えるものではない。既存のMarkdownファイルをそのまま扱い、ファイル分割や設定、ビルドステップなしで、単一のMarkdownファイルをナビゲーション可能な複数ページとして扱えるようにする。サイドバー、ドロップダウン、コマンドパレット、ジェスチャーなど、具体的なUIの配置や見た目は定めず、備えるべき機能を規定している。

背景として、MarkdownがAIエージェントと人間のコミュニケーションで使われる標準的な形式になっている一方で、人間が読む体験が十分に変わっていないことを挙げる。また、短いREADMEと長い技術仕様書が同じように平坦なスクロール画面として扱われることに加え、文書内の位置や構造を把握しにくいことも課題だという。

MDXGの中核となる機能は、仮想ページである。仕様では、仮想ページについて次の要件を定めている。

  • H1とH2の見出しを境界としてMarkdown文書をページに分割し、各ページに見出しから生成したタイトルと識別子を付ける
  • 利用者が文書内のページ一覧を見たり、現在のページを確認したり、任意のページへ移動したりできる
  • H3からH6までの見出しを現在のページ内のアウトラインとして扱い、前後のページへ移動する順次ナビゲーションも含める
  • 検索は分割後の全ページを対象にし、検索語のハイライト、現在の一致箇所へのスクロール、前後の一致箇所への移動、ページをまたいだ一致位置の保持、件数表示に対応する

なお、検索対象は生のMarkdownソースではなく、利用者に表示されるレンダリング済みテキストになる。

表示面では、ホスト環境のテーマに合わせることも要件に含まれる。ただし、MDXGは独自の配色、フォント、ビジュアルスタイルを定めず、背景色、文字色、アクセント色、境界線などをホスト側のテーマやOSから取得する方針を示している。

また、言語識別子付きのフェンスコードブロックは、シンタックスハイライト付きで表示し、各コードブロックにコピー用ボタンを付ける。タスクリスト構文はチェックボックスとして表示し、画像、テーブル、キーボード操作のアクセシビリティも要件に含める。

こうした表示要件とは別に、数式、Mermaidなどのダイアグラム、脚注への追加対応も推奨している。

仕様への準拠レベルは、実装がMDXGの要件をどこまで満たすかを示す区分で、次の2段階に分かれる。

  • MDXG Viewer: 読み取り専用の実装で、テーマ対応、コードブロック表示、タスクリスト、画像、テーブル、仮想ページ、ページナビゲーション、ページアウトライン、順次ナビゲーション、検索、キーボード操作を備える。
  • MDXG Editor: 編集機能を含む実装で、MDXG Viewerの機能に加えて、プレビュー表示とソース表示の切り替え、編集可能なソースモード、変更内容の元文書への同期、別のMarkdownファイルへのリンクを同じMDXG準拠ビューアーまたはエディターで開けるようにする。

GitHubリポジトリでは、参照実装としてVS Code拡張機能の@mdxg/vscodeが公開されている。各実装で使う共通パーサーの@mdxg/parserも用意されており、文書の分割、見出し抽出、ページ識別子の生成を処理する。

Chris氏は、MDXGに関する仕様や実装へのフィードバックを歓迎している。

おすすめ記事

記事・ニュース一覧