x-markdown

🎯 スキルの位置づけ

このスキルが扱うのは、1つの役割だけです：@ant-design/x-markdown で Markdown を正確かつ予測可能にレンダリングします。

対象となる内容は次のとおりです。

• 基本的なレンダリングとパッケージの境界
• LLM のストリーミング出力と不完全な構文の処理
• リッチなチャットやデータ表示ブロック向けのカスタムコンポーネントのマッピング
• プラグイン、テーマ、安全なレンダリングのデフォルト設定

目次

• 📦 パッケージの境界
• 🚀 クイックスタート判断ガイド
• 🛠 推奨ワークフロー
• 🚨 開発ルール
• 🤝 スキルの連携
• 🔗 参考リソース

📦 パッケージの境界

レイヤー	パッケージ	役割
UI レイヤー	@ant-design/x	チャット UI、バブルリスト、送信者、リッチなインタラクションコンポーネント
データレイヤー	@ant-design/x-sdk	プロバイダー、リクエスト、ストリーミングデータフロー、状態管理
レンダリングレイヤー	@ant-design/x-markdown	Markdown の解析、ストリーミングレンダリング、プラグイン、テーマ、カスタムレンダラー

⚠️ x-markdown はチャットの状態を扱うツールではありません。@ant-design/x と @ant-design/x-sdk がメッセージデータを生成した後のコンテンツのレンダリングに使用してください。

🚀 クイックスタート判断ガイド

必要な内容	最初に読むドキュメント	一般的な結果
最小限の設定で Markdown をレンダリングする	CORE.md	XMarkdown が基本的なスタイルで信頼できるコンテンツをレンダリングします
LLM のストリーミングチャンクをレンダリングする	STREAMING.md	hasNextChunk、プレースホルダー、テールインジケーター、ローディング状態が正しく処理されます
タグをビジネスコンポーネントに置き換える	EXTENSIONS.md	カスタムタグとコードブロック向けの安定した components マップを作成できます
プラグインやテーマのオーバーライドを追加する	EXTENSIONS.md	プラグインのインポート、テーマクラスの設定、最小限の CSS オーバーライドを行えます
prop の詳細とデフォルト値を確認する	API.md	XMarkdown とストリーミングオプションの prop 一覧を確認できます

🛠 推奨ワークフロー

1. CORE.md から始め、まずプレーンなレンダリングを動作させます。
2. コンテンツがチャンク単位で届く場合にのみ、STREAMING.md を追加します。
3. カスタムタグ、プラグイン、構文ブロック、テーマが必要な場合は、EXTENSIONS.md を追加します。
4. 推測するのではなく、API.md で prop 名とデフォルト値を確認します。

最小限のセットアップに関する注意

import { XMarkdown } from '@ant-design/x-markdown';

export default () => <XMarkdown content="# Hello" />;

🚨 開発ルール

• 安定した components オブジェクトを優先してください。レンダリングのたびにインラインのコンポーネントマッピングを新しく作成しないでください。
• 最終チャンクでは streaming.hasNextChunk = false を設定してください。そうしないと、不完全なプレースホルダーが最終コンテンツに反映されません。
• 生 HTML は慎重に扱ってください。生 HTML をテキストとして表示する場合は、escapeRawHtml を優先してください。
• 生 HTML をレンダリングする必要がある場合は、dompurifyConfig を明示的かつ最小限に設定してください。
• テーマのオーバーライドは小規模に保ってください。x-markdown-light または x-markdown-dark を基にして、必要な変数だけをオーバーライドします。
• カスタムコンポーネントが構文の完成を前提とする場合は、streamStatus === 'done' に応じて処理を分岐してください。

🤝 スキルの連携

シナリオ	推奨されるスキルの組み合わせ	理由
チャットでのリッチなアシスタントの応答	x-chat-provider → x-request → use-x-chat → x-markdown	プロバイダーとリクエストがデータフローを処理し、x-markdown が最終的なレンダリングを処理します
Markdown の応答を返す組み込みプロバイダー	x-request → use-x-chat → x-markdown	リクエスト設定とレンダリングの関心事を分離できます
スタンドアロンの Markdown ページまたはドキュメントビューアー	x-markdown のみ	チャットのデータフローは必要ありません

境界のルール

• API 形式を適応させる場合は x-chat-provider を使用してください。
• トランスポート、認証、リトライ、ストリーミング区切り文字を設定する場合は x-request を使用してください。
• React でチャットの状態を管理する場合は use-x-chat を使用してください。
• コンテンツ自体に Markdown の解析、ストリーミングの復元、またはリッチなコンポーネントのレンダリングが必要な場合は x-markdown を使用してください。

🔗 リファレンスリソース

• CORE.md - パッケージの境界、インストールとセットアップ、安全なデフォルト設定、一般的なレンダリングパターン
• STREAMING.md - チャンク単位のレンダリング、不完全な構文の復元、読み込み中と完了時の動作
• EXTENSIONS.md - コンポーネント、プラグイン、テーマ、カスタムタグに関するガイダンス
• API.md - 公式の x-markdown ドキュメントから生成された API リファレンス

公式ドキュメント

• XMarkdown の概要
• XMarkdown の例
• XMarkdown のストリーミング
• XMarkdown のコンポーネント
• XMarkdown のプラグイン
• XMarkdown のテーマ