syncfusion-aspnetcore-markdown-converter

Syncfusion ASP.NET Core Markdown Converter

Syncfusion ASP.NET Core Markdown Converter は、Markdown テキストをクリーンでセマンティックな HTML に変換する軽量なクライアントサイドユーティリティです（CDN または npm 経由で読み込めます）。見出し、リスト、表、リンク、画像、インラインスタイルなど、一般的な Markdown 要素をすべてサポートしており、Syncfusion Rich Text Editor タグヘルパー（<ejs-richtexteditor>）とシームレスに連携することで、ASP.NET Core MVC または Razor Pages アプリケーションでライブ編集やプレビューのワークフローを実現できます。

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet によるインストールとタグヘルパーの登録
• CDN のスタイルシートおよびスクリプトの参照
• Razor ビューで基本的な Markdown から HTML への変換を実行する方法
• 必要な CSS とテーマの設定

toHtml API

📄 参照： references/tohtml-api.md

• toHtml メソッドのシグネチャとパラメーター（Razor ビューから JavaScript を使用）
• サポートされている Markdown 要素（見出し、リスト、表、リンク、画像、インラインスタイル）
• 戻り値と使用パターン
• シンプルな変換コードの例

設定可能なオプション

📄 参照： references/configurable-options.md

• MarkdownConverterOptions オブジェクト
• async — 大きなコンテンツを非同期で変換します
• gfm — GitHub Flavored Markdown をサポートします
• lineBreak — 単一の改行を <br> 要素として扱います
• silence — 無効な Markdown によるエラーを抑制します
• 各オプションを使用するタイミングと理由

Rich Text Editor との連携

📄 参照： references/richtexteditor-integration.md

• <ejs-richtexteditor>（editorMode="Markdown"）と MarkdownConverter の組み合わせ
• toHtml を使用した keyup 時のライブプレビュー
• プレビュー全体の切り替えパターン
• 横並びの Splitter レイアウト
• Markdown モード用のツールバー設定

---

クイックスタート

タグヘルパーを登録して CDN を参照し、最小限の変換を実行します。

{{! _ViewImports.cshtml }}
@addTagHelper *, Syncfusion.EJ2

{{! _Layout.cshtml <head> }}
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{{! _Layout.cshtml before </body> }}
<ejs-scripts></ejs-scripts>

// Inline script in Razor view or a linked .js file
var markdownContent = '# Hello World\nThis is **Markdown** text.';
var htmlOutput = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

---

一般的なパターン

すべてのオプションを有効にして変換する

var html = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent, {
  async: true,      // Non-blocking for large content
  gfm: true,        // GitHub Flavored Markdown
  lineBreak: true,  // Treat single newlines as <br>
  silence: true     // Suppress parse errors
});

ユーザー入力に応じたライブプレビュー

document.getElementById('textarea').addEventListener('keyup', function () {
  document.getElementById('preview').innerHTML =
    ej.markdownconverter.MarkdownConverter.toHtml(this.value);
});

Markdown モードで Syncfusion RTE タグヘルパーと連携する

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "# Hello\nType **Markdown** here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

---

主なプロパティ

オプション	型	デフォルト	目的
async	boolean	false	大きなペイロードを非同期で変換します
gfm	boolean	true	GitHub Flavored Markdown をサポートします
lineBreak	boolean	false	単一の改行を <br> に変換します
silence	boolean	false	例外を発生させる代わりに、無効な Markdown をスキップします

---

一般的なユースケース

• 静的コンテンツのレンダリング — テキストエリアやコントローラーアクションからユーザーが作成した Markdown を HTML に変換し、Razor ビューに表示します
• エディターのライブプレビュー — Markdown モードの Syncfusion RTE タグヘルパーと組み合わせ、HTML をリアルタイムでプレビューします
• 横並びの編集 — Syncfusion Splitter タグヘルパーを使用して、エディターとレンダリングされた HTML を同時に表示します
• CMS／ドキュメントツール — データベースやファイルに保存された Markdown を処理してから、Razor 部分ビュー内にレンダリングします