syncfusion-angular-markdown-converter

Syncfusion Angular Markdown Converter の実装

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

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

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

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

はじめに

📄 参照: references/getting-started.md

• Angular CLI のセットアップとプロジェクトの作成
• @syncfusion/ej2-markdown-converter と @syncfusion/ej2-angular-richtexteditor のインストール
• material3 テーマ用 CSS のインポート
• 必要なモジュールのインジェクション（MarkdownEditor、Image、Link、Toolbar、Table）
• アプリケーションの実行

Markdown から HTML への変換 — toHtml API

📄 参照: references/tohtml-api.md

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

設定可能なオプション

📄 参照: references/configurable-options.md

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

Rich Text Editor との統合

📄 参照: references/richtexteditor-integration.md

• Splitter を使ったエディターとプレビューの横並びレイアウト
• Markdown の editorMode での ejs-richtexteditor の設定
• onChange と updateValue() を使ったリアルタイムプレビュー
• Markdown 編集用のツールバー設定
• カスタム Markdown 構文用の MarkdownFormatter
• カスタムプレビュー切り替えボタン（fullPreview パターン）
• Browser.isDevice を使ったモバイル／デバイスの向きへの対応

クイックスタート

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

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

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-angular-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：キー入力時のライブプレビュー

Rich Text Editor のテキストエリア内でキーが入力されるたびに変換します：

public markDownConversion(): void {
  const textarea = this.editorObj.contentModule.getEditPanel() as HTMLTextAreaElement;
  const previewEl = document.getElementById('html-view') as HTMLElement;
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value) as string;
}

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

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

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

パターン 4：Splitter を使った横並びプレビュー

エディターとプレビューを組み合わせた表示には、Markdown モードの Rich Text Editor と合わせて Syncfusion Splitter コンポーネントを使用します。プレビュー領域は、変更イベントのたびに updateValue() で更新されます。 📄 参照: 完全な実装については references/richtexteditor-integration.md をご覧ください。

主なプロパティ／API

API	型	既定値	用途
MarkdownConverter.toHtml(content, options?)	static method	—	Markdown 文字列を HTML に変換
options.async	boolean	false	大きなコンテンツの非同期変換
options.gfm	boolean	true	GitHub Flavored Markdown のサポート
options.lineBreak	boolean	false	単一の改行を <br> に変換
options.silence	boolean	false	無効な Markdown に関するエラーを抑制