syncfusion-wpf-markdown-viewer

WPF SfMarkdownViewer の実装

SfMarkdownViewer は、見出し、リスト、リンク、画像、表、コードブロック、引用ブロックなどの Markdown コンテンツを、スタイル設定された WPF ビジュアルにレンダリングします。外部レンダリングエンジンを使わずに、ドキュメント、リリースノート、ヘルプコンテンツ、README ファイル、その他の Markdown ベースのコンテンツを表示できます。

このスキルを使用する場面

• WPF アプリで Markdown コンテンツをレンダリングまたはプレビューする必要がある
• ハードコードされた文字列、アプリケーションにバンドルされたリソース、またはアプリケーションが管理するローカルファイルから Markdown を読み込む
• 信頼できる、アプリケーションが所有するソースに由来するドキュメント、変更履歴、ヘルプテキストを表示する
• URL の検証と許可リストを使ってハイパーリンクのナビゲーションをインターセプトする
• 入力の長さと型を検証して Mermaid フローチャート図をレンダリングする

⚠️ 対象外： アプリケーションコードでコンテンツを取得、検証、サニタイズせずに、任意のサードパーティー URL や未検証のユーザー入力から Markdown を直接読み込む用途には、このスキルを使用しないでください。

クイックスタート

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:markdown="clr-namespace:Syncfusion.UI.Xaml.Markdown;assembly=Syncfusion.SfMarkdownViewer.WPF"
    xmlns:system="clr-namespace:System;assembly=mscorlib">
    <Grid>
        <markdown:SfMarkdownViewer Source="# Hello World&#10;&#10;This is **bold** and *italic* text." />
    </Grid>
</Window>

using Syncfusion.UI.Xaml.Markdown;

SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
markdownViewer.Source = "# Hello World\n\nThis is **bold** and *italic* text.";
this.Content = markdownViewer;

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.SfMarkdownViewer.Wpf）
• 必要なアセンブリ参照（3 つのアセンブリ）
• XAML 名前空間のインポート
• XAML と C# でコントロールを追加する方法
• Source プロパティを使用したインライン Markdown 文字列
• SfSkinManager のテーマサポート

コンテンツの読み込み

📄 参照： references/loading-content.md

• 生の Markdown 文字列から読み込む
• アプリケーションが管理するローカルファイルパスから読み込む
• アプリケーションコードを介してリモート URL から読み込む（取得 → オリジンを検証 → content-type を確認 → 文字列を割り当て）
• XAML の CDATA 文字列ソースパターン
• 選択ガイド：使用するソースの種類
• リモートコンテンツ読み込みのセキュリティ要件

イベント

📄 参照： references/events.md

• HyperlinkClicked イベント
• MarkdownHyperlinkClickedEventArgs（Url、Cancel）
• デフォルトでキャンセルするパターン — 常に最初にキャンセルし、その後、検証済みの URL のみを選択的に許可する
• app:// リンクに対する許可リストベースのアプリ内ルート検証
• HTTPS 以外の外部スキームをブロックする

Mermaid 図

📄 参照： references/mermaid-diagrams.md

• MermaidBlockTemplate プロパティ
• DataTemplate に SfDiagram を埋め込む
• レンダリング前に DataContext（Mermaid 文字列）を検証する — 長さ制限と型の許可リスト
• FlowchartLayout の設定
• LoadDiagramFromMermaid() の使用方法
• Mermaid サポートに必要な依存関係

主なプロパティ

プロパティ	型	用途
Source	string	生の Markdown 文字列、ファイルパス、または HTTP/HTTPS URL
MermaidBlockTemplate	DataTemplate	Mermaid コードブロックをレンダリングするためのカスタムテンプレート

主なイベント

イベント	引数	用途
HyperlinkClicked	MarkdownHyperlinkClickedEventArgs	レンダリングされた Markdown 内のハイパーリンクをユーザーがクリックしたときに発生します

一般的なユースケース

• アプリ内ドキュメント： Markdown をハードコードされた文字列またはアプリケーションにバンドルされたリソースファイルとして埋め込み、Source に直接割り当てる
• リリースノートパネル： アプリケーションにバンドルされたローカルの .md ファイル（ユーザー入力によるパスではありません）を読み込み、そのテキストを Source に割り当てる
• リモートドキュメント： アプリケーションコード内で、アプリケーションが所有する HTTPS エンドポイントから Markdown を取得し、HTTP レスポンスのオリジンと content-type を検証してから、サニタイズ済みの文字列を Source に割り当てる — サードパーティー URL を Source に直接渡さない
• ヘルプビューアー： 信頼できる、アプリケーションが管理するソースからのコンテキストに応じた Markdown ヘルプ文字列をレンダリングする
• 図ビューアー： MermaidBlockTemplate と SfDiagram を使用してフローチャートをレンダリングする。LoadDiagramFromMermaid() を呼び出す前に、Mermaid の DataContext 文字列（長さと型のプレフィックス）を検証する
• 制御されたナビゲーション： HyperlinkClicked をデフォルトでキャンセルするように処理する。app:// ルートを明示的な許可リストと照合して検証し、外部リンクは https:// のみを許可する

セキュリティに関する考慮事項

リスク	軽減策
リモート URL によって、信頼できないサードパーティの Markdown が読み込まれる	アプリのコードでコンテンツを取得し、Source に設定する前に、オリジン（許可リストに登録されたベース URL）とコンテンツタイプを検証します
Markdown 内のハイパーリンクによって、意図しないナビゲーションが発生する	HyperlinkClicked ではデフォルトでキャンセルし、app:// ルートを固定の許可リストと照合して検証します。外部リンクは https:// のみ許可します
信頼できない Markdown の Mermaid ブロックによって、図がレンダリングされる	DataContext 文字列を検証します。null でないことを確認し、長さの上限を適用し、LoadDiagramFromMermaid() の呼び出し前に図の種類のプレフィックスを許可リストと照合します
ユーザーが指定した URL が Source に渡される	ユーザー入力やサードパーティのデータから URL をそのまま受け取らないでください。必ず先にアプリケーションコードでオリジンを検証します