syncfusion-vue-markdown-converter

Syncfusion Vue Markdown Converter の実装

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

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

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

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

はじめに

📄 参照: references/getting-started.md

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

Markdown から HTML への変換 — toHtml API

📄 参照: references/tohtml-api.md

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

設定可能なオプション

📄 参照: 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-vue-richtexteditor

2. src/App.vue または src/main.js で CSS をインポートします：

import '@syncfusion/ej2-base/styles/material3.css';
import '@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;

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

Rich Text Editor のテキストエリア内で、キー入力のたびに変換する場合：

markDownConversion() {
  const textarea = this.rteObj.contentModule.getEditPanel();
  const previewEl = document.getElementById('html-view');
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value);
}

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

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

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

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

エディターとプレビューを組み合わせた本格的な機能を実現するには、Markdown モードの Rich Text Editor とともに Syncfusion Splitter コンポーネントを使用します。プレビューペインは、変更イベントのたびに updateValue() で更新されます。 📄 参照: references/richtexteditor-integration.md に完全な実装例があります。

主な Props／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 によるエラーを抑制します