syncfusion-react-markdown-converter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Markdown Converter

在React中实现Syncfusion Markdown Converter

The Syncfusion Markdown Converter is a lightweight utility that transforms Markdown-formatted text into clean, semantic HTML. It is typically used alongside the Syncfusion React Rich Text Editor (

RichTextEditorComponent

) in Markdown editing mode to provide a live preview of rendered content.

Syncfusion Markdown Converter是一款轻量级工具，可将Markdown格式的文本转换为整洁、语义化的HTML。它通常与Syncfusion React富文本编辑器（

RichTextEditorComponent

）配合使用，在Markdown编辑模式下提供渲染内容的实时预览。

When to Use This Skill

适用场景

Convert Markdown text to HTML in a React application
Display a live preview of Markdown content as the user types
Configure conversion behavior (GFM support, line breaks, async mode, error suppression)
Build a Markdown editor with HTML preview using
```
RichTextEditorComponent
```
in Markdown mode
Integrate
```
MarkdownConverter.toHtml()
```
with the Syncfusion React Rich Text Editor

在React应用中将Markdown文本转换为HTML
用户输入时实时显示Markdown内容的预览效果
配置转换行为（GFM支持、换行、异步模式、错误抑制）
使用Markdown模式的
```
RichTextEditorComponent
```
构建带HTML预览的Markdown编辑器
将
```
MarkdownConverter.toHtml()
```
与Syncfusion React富文本编辑器集成

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

React setup and project creation (Vite / CRA)

Installing

@syncfusion/ej2-markdown-converter

and

@syncfusion/ej2-react-richtexteditor

CSS imports for the material3 theme
Module injection (
```
MarkdownEditor
```
,
```
Toolbar
```
,
```
Image
```
,
```
Link
```
,
```
Table
```
)
Running the application

React环境搭建与项目创建（Vite / CRA）

安装

@syncfusion/ej2-markdown-converter

和

@syncfusion/ej2-react-richtexteditor

导入material3主题的CSS样式
模块注入（
```
MarkdownEditor
```
、
```
Toolbar
```
、
```
Image
```
、
```
Link
```
、
```
Table
```
）
运行应用

Convert Markdown to HTML — toHtml API

转换Markdown到HTML — toHtml API

```
MarkdownConverter.toHtml()
```
method signature
Basic usage example (standalone, no editor required)
Supported Markdown elements (headings, lists, tables, links, images, inline styles)
Using the return value with
```
dangerouslySetInnerHTML
```

```
MarkdownConverter.toHtml()
```
方法签名
基础使用示例（独立使用，无需编辑器）
支持的Markdown元素（标题、列表、表格、链接、图片、行内样式）
结合
```
dangerouslySetInnerHTML
```
使用返回值

Configurable Options

可配置选项

```
MarkdownConverterOptions
```
interface
```
async
```
— asynchronous conversion for large content
```
gfm
```
— GitHub Flavored Markdown support (default: true)
```
lineBreak
```
— convert single line breaks to
```
<br>
```
(default: false)
```
silence
```
— suppress errors on invalid Markdown (default: false)
Full example passing options to
```
toHtml()
```

```
MarkdownConverterOptions
```
接口
```
async
```
— 针对大内容的异步转换
```
gfm
```
— GitHub风格Markdown支持（默认值：true）
```
lineBreak
```
— 将单个换行转换为
```
<br>
```
（默认值：false）
```
silence
```
— 抑制无效Markdown的错误提示（默认值：false）
向
```
toHtml()
```
传递选项的完整示例

Rich Text Editor Integration

富文本编辑器集成

Markdown mode with
```
editorMode="Markdown"
```
Live preview using
```
created
```
,
```
change
```
, and
```
actionComplete
```
events
Toolbar configuration for Markdown editing
```
MarkdownFormatter
```
for custom Markdown syntax
Custom preview toggle button (full preview pattern)
Full working example with preview toggle

通过
```
editorMode="Markdown"
```
启用Markdown模式
使用
```
created
```
、
```
change
```
和
```
actionComplete
```
事件实现实时预览
Markdown编辑的工具栏配置
用于自定义Markdown语法的
```
MarkdownFormatter
```
自定义预览切换按钮（全屏预览模式）
带预览切换的完整可用示例

Quick Start

快速开始

Install packages and wire up the converter in three steps:

1. Install packages:

bash

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

2. Import CSS in
src/styles.css
:

css

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

3. Convert Markdown to HTML:

tsx

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. 安装包：

bash

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

2. 在
src/styles.css
中导入CSS：

css

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

3. 转换Markdown到HTML：

tsx

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>

Common Patterns

常见模式

Pattern 1: Standalone Conversion (No Editor)

模式1：独立转换（无需编辑器）

When you only need to convert a Markdown string to HTML without an editor UI:

tsx

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

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

当你仅需将Markdown字符串转换为HTML而不需要编辑器UI时：

tsx

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

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

Pattern 2: Live Preview on Keyup

模式2：按键触发实时预览

Convert on every keystroke inside a Rich Text Editor textarea:

tsx

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;
  }
};

在富文本编辑器文本框中每次按键时进行转换：

tsx

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;
  }
};

Pattern 3: Conversion with Options

模式3：带选项的转换

Disable GFM and enable line-break conversion:

tsx

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

禁用GFM并启用换行转换：

tsx

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

Pattern 4: Side-by-Side Preview with Splitter

模式4：带拆分器的并排预览

For a full editor + preview experience, use the Syncfusion Splitter component alongside the Rich Text Editor in Markdown mode. The preview pane is updated via

updateValue()

on every change event. 📄 Read: references/richtexteditor-integration.md for the full implementation.

如需完整的编辑器+预览体验，可将Syncfusion拆分器组件与Markdown模式的富文本编辑器配合使用。预览面板会在每次变更事件时通过

updateValue()

更新。 📄 阅读： references/richtexteditor-integration.md 获取完整实现方案。

Key Props / API

核心属性 / API

API	Type	Default	Purpose
`MarkdownConverter.toHtml(content, options?)`	static method	—	Converts Markdown string to HTML
`options.async`	boolean	`false`	Async conversion for large content
`options.gfm`	boolean	`true`	GitHub Flavored Markdown support
`options.lineBreak`	boolean	`false`	Single line breaks → `<br>`
`options.silence`	boolean	`false`	Suppress errors on invalid Markdown

API	类型	默认值	用途
`MarkdownConverter.toHtml(content, options?)`	静态方法	—	将Markdown字符串转换为HTML
`options.async`	布尔值	`false`	针对大内容的异步转换
`options.gfm`	布尔值	`true`	GitHub风格Markdown支持
`options.lineBreak`	布尔值	`false`	单个换行 → `<br>`
`options.silence`	布尔值	`false`	抑制无效Markdown的错误提示