syncfusion-maui-markdown-viewer

Syncfusion .NET MAUI MarkdownViewer の実装

このスキルでは、モバイルおよびデスクトッププラットフォーム向けの .NET MAUI アプリケーションで、Markdown コンテンツを完全な書式設定に対応して表示する、軽量で効率的な UI コンポーネントである SfMarkdownViewer コントロールの実装方法を説明します。

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

次のような場合にこのスキルを使用してください。

• .NET MAUI アプリケーションに Markdown 形式のコンテンツを表示する
• アプリ内ドキュメント、ユーザーガイド、ヘルプコンテンツをレンダリングする
• リリースノート、変更履歴、機能の更新情報を表示する
• FAQ、トラブルシューティングガイド、サポート記事を提示する
• 文字列、ローカルファイル、埋め込みリソース、URL から Markdown を読み込む
• レンダリングした Markdown の外観（フォント、色、間隔）をカスタマイズする
• 高度なテーマ設定にカスタム CSS スタイルを適用する
• Markdown コンテンツをプログラムで取得または変換する（HTML またはプレーンテキストに変換）
• ドキュメントビューアー、ノートアプリ、コンテンツポータルを作成する

コンポーネントの概要

SfMarkdownViewer が提供する機能：

• 標準的な Markdown のサポート — 見出し、太字／斜体のテキスト、リスト、表、画像、コードブロック、リンクなどをレンダリングします
• 柔軟な入力ソース — 文字列、.md ファイル、埋め込みリソース、リモート URL からコンテンツを読み込みます
• 外観のカスタマイズ — MarkdownStyleSettings を使用してフォント、色、間隔を調整できます
• カスタム CSS スタイル — CSS ルールを直接使用して高度なテーマ設定を適用できます
• コンテンツの取得 — 生の Markdown へのアクセス、HTML への変換、プレーンテキストの抽出ができます
• スムーズなスクロール — すべてのプラットフォームで大きなドキュメントをスムーズに移動できます
• クロスプラットフォーム対応 — iOS、Android、Windows、macOS で一貫した表示を実現します

一般的なユースケース：

• アプリ内ドキュメントと機能紹介
• リリースノートとバージョン更新の表示
• ヘルプセクションとサポートポータル
• リンクを含むインタラクティブなコンテンツ
• スタイルを適用したコンテンツの表示

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

はじめに

📄 参照先： references/getting-started.md

次のような場合に参照してください。

• Syncfusion.Maui.MarkdownViewer NuGet パッケージをインストールする
• MauiProgram.cs に Syncfusion ハンドラーを登録する
• 最初の SfMarkdownViewer コントロールを作成する（XAML または C#）
• 表示する基本的な Markdown コンテンツを追加する

さまざまなソースからコンテンツを読み込む

📄 参照先： references/loading-content.md

次のような場合に参照してください。

• 文字列変数から Markdown を読み込む
• ローカルの .md ファイルから Markdown を読み込む
• プロジェクトの埋め込みリソースファイルを読み込む
• リモート URL から Markdown を取得する
• 非同期の読み込みシナリオに対応する
• ユースケースに適したコンテンツソースを選択する

外観のカスタマイズ

📄 参照先： references/appearance-customization.md

次のような場合に参照してください。

• 見出しのサイズと色（H1、H2、H3）をカスタマイズする
• 本文のフォントサイズと色を変更する
• 表のヘッダー、データセル、背景にスタイルを設定する
• MarkdownStyleSettings クラスを使用する
• Markdown の外観をアプリのテーマに合わせる
• プロパティベースのスタイル設定方法を理解する

カスタム CSS スタイル

📄 参照先： references/custom-css-styling.md

次のような場合に参照してください。

• 基本的なプロパティを超える高度なスタイルを適用する
• カスタム CSS ルールで既定のスタイルを上書きする
• 画像のスタイルを設定する（境界線、影、角の丸み、サイズ）
• 表の外観をカスタマイズする（縞模様の行、境界線、パディング）
• スクロールバーの表示とスタイルを制御する
• ブランドに合わせたコンテンツデザインを実装する
• プロパティに対する CSS の優先順位を理解する

コンテンツの取得

📄 参照先： references/content-retrieval.md

次のような場合に参照してください。

• 生の Markdown テキストをプログラムで取得する
• Markdown コンテンツを HTML 形式に変換する
• 書式設定なしのプレーンテキストを抽出する
• GetMarkdownText()、GetHtmlText()、GetText() メソッドを使用する
• コード内で Markdown コンテンツを処理または変換する

トラブルシューティング

📄 参照： references/troubleshooting.md

次のような問題が発生した場合：

• ハンドラーが登録されていないというエラー
• NuGet パッケージのインストールに関する問題
• スタイルが正しく適用されない
• CSS でプロパティを上書きできない
• フォントサイズの単位に関する問題
• 画像の読み込みに失敗する
• URL の読み込みに関する問題
• プラットフォーム間でレンダリング結果が異なる