syncfusion-react-markdown-converter

Syncfusion React Markdown Converter の実装

Syncfusion Markdown Converter は、Markdown 形式のテキストをクリーンでセマンティックな HTML に変換する軽量ユーティリティです。通常は、Syncfusion React Rich Text Editor（RichTextEditorComponent）の Markdown 編集モードと併用し、レンダリングされたコンテンツのライブプレビューを提供するために使用します。

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

• React アプリケーションで Markdown テキストを HTML に変換する
• ユーザーの入力に合わせて Markdown コンテンツのライブプレビューを表示する
• 変換動作（GFM のサポート、改行、非同期モード、エラーの抑制）を設定する
• Markdown モードの RichTextEditorComponent を使って、HTML プレビュー付きの Markdown エディターを作成する
• MarkdownConverter.toHtml() を Syncfusion React Rich Text Editor と統合する

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

はじめに

• React のセットアップとプロジェクトの作成（Vite／CRA）
• @syncfusion/ej2-markdown-converter と @syncfusion/ej2-react-richtexteditor のインストール
• material3 テーマの CSS インポート
• モジュールの挿入（MarkdownEditor、Toolbar、Image、Link、Table）
• アプリケーションの実行

Markdown を HTML に変換 — toHtml API

• MarkdownConverter.toHtml() メソッドのシグネチャ
• 基本的な使用例（エディター不要の単独使用）
• サポートされる Markdown 要素（見出し、リスト、表、リンク、画像、インラインスタイル）
• dangerouslySetInnerHTML で戻り値を使用する方法

設定可能なオプション

• MarkdownConverterOptions インターフェイス
• async — 大きなコンテンツを非同期で変換します
• gfm — GitHub Flavored Markdown のサポート（デフォルト：true）
• lineBreak — 単一の改行を <br> に変換します（デフォルト：false）
• silence — 無効な Markdown に関するエラーを抑制します（デフォルト：false）
• toHtml() にオプションを渡す完全な例

リッチテキストエディターとの統合

• editorMode="Markdown" を使った Markdown モード
• created、change、actionComplete イベントを使ったライブプレビュー
• Markdown 編集用のツールバー設定
• カスタム Markdown 構文用の MarkdownFormatter
• カスタムプレビュー切り替えボタン（フルプレビューパターン）
• プレビュー切り替えを含む完全な動作例

クイックスタート

パッケージをインストールし、3 つの手順でコンバーターを接続します。

1. パッケージをインストールします：

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-react-richtexteditor

2. src/styles.css に CSS をインポートします：

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

3. Markdown を HTML に変換します：

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const markdown = '# Hello World\nThis is **Markdown** text.';
const html = MarkdownConverter.toHtml(markdown);
console.log(html);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

よく使われるパターン

パターン 1：単独での変換（エディターなし）

エディター UI を使わず、Markdown 文字列を HTML に変換する場合：

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const html = MarkdownConverter.toHtml(markdownString);
document.getElementById('preview')!.innerHTML = html as string;

パターン 2：キー入力時のライブプレビュー

リッチテキストエディターのテキストエリア内で、キー入力のたびに変換します：

const markdownConversion = () => {
  if (mdsource?.classList.contains('e-active')) {
    const htmlPreview = rteObj.element.querySelector('#' + rteObj.getID() + 'html-view') as HTMLElement;
    htmlPreview.innerHTML = MarkdownConverter.toHtml(
      (rteObj.contentModule.getEditPanel() as HTMLTextAreaElement).value
    ) as string;
  }
};

パターン 3：オプションを指定した変換

GFM を無効にし、改行変換を有効にします：

const html = MarkdownConverter.toHtml(markdownString, {
  gfm: false,
  lineBreak: true
});

パターン 4：スプリッターを使った左右並列プレビュー

エディターとプレビューを組み合わせた表示にするには、Markdown モードのリッチテキストエディターとともに Syncfusion Splitter コンポーネントを使用します。変更イベントのたびに updateValue() を使ってプレビューペインを更新します。 📄 お読みください： 完全な実装については、references/richtexteditor-integration.md を参照してください。

主なプロパティ／API

API	型	デフォルト	用途
MarkdownConverter.toHtml(content, options?)	静的メソッド	—	Markdown 文字列を HTML に変換します
options.async	boolean	false	大きなコンテンツを非同期で変換します
options.gfm	boolean	true	GitHub Flavored Markdown のサポート
options.lineBreak	boolean	false	単一の改行 → <br>
options.silence	boolean	false	無効な Markdown に関するエラーを抑制します