syncfusion-javascript-markdown-converter

Syncfusion TypeScript Markdown Converter

Syncfusion TypeScript Markdown Converter（@syncfusion/ej2-markdown-converter）は、Markdown テキストをクリーンでセマンティックな HTML に変換する軽量ユーティリティです。見出し、リスト、表、リンク、画像、インラインスタイルなど、一般的な Markdown 要素をすべてサポートし、Syncfusion Rich Text Editor とシームレスに連携して、ライブ編集やプレビューのワークフローを実現します。

---

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• @syncfusion/ej2-markdown-converter パッケージのインストール
• TypeScript プロジェクトへの MarkdownConverter のインポート
• 基本的な Markdown から HTML への変換の実行
• 必要な CSS とテーマの設定

toHtml API

📄 参照: references/tohtml-api.md

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

設定可能なオプション

📄 参照: references/configurable-options.md

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

Rich Text Editor との連携

📄 参照: references/richtexteditor-integration.md

• @syncfusion/ej2-richtexteditor と @syncfusion/ej2-markdown-converter の併用
• RTE で editorMode: 'Markdown' を設定
• toHtml を使用した keyup 時のライブプレビュー
• フルプレビューの切り替えパターン
• 横並びの Splitter レイアウト
• Markdown モードのツールバー設定

---

クイックスタート

パッケージをインストールし、最小限の変換を実行します。

npm install @syncfusion/ej2-markdown-converter

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

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

---

一般的なパターン

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

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

const html = 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
});

ユーザー入力時にライブプレビューを表示する

textArea.addEventListener('keyup', () => {
  previewElement.innerHTML = MarkdownConverter.toHtml(textArea.value) as string;
});

Syncfusion RTE を Markdown モードで連携する

import { RichTextEditor, MarkdownEditor, Toolbar } from '@syncfusion/ej2-richtexteditor';
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';
RichTextEditor.Inject(MarkdownEditor, Toolbar);

const rte = new RichTextEditor({
  editorMode: 'Markdown',
  height: '400px'
});
rte.appendTo('#editor');

---

主なプロパティ

オプション	型	デフォルト	目的
async	boolean	false	大きなデータを非同期で変換
gfm	boolean	true	GitHub Flavored Markdown のサポート
lineBreak	boolean	false	単一の改行 → <br>
silence	boolean	false	エラーをスローせず、無効な Markdown をスキップ

---

一般的なユースケース

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