syncfusion-aspnetcore-markdown-converter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core Markdown Converter

The Syncfusion ASP.NET Core Markdown Converter is a lightweight client-side utility (loaded via CDN or npm) that transforms Markdown text into clean, semantic HTML. It supports all common Markdown elements — headings, lists, tables, links, images, and inline styles — and integrates seamlessly with the Syncfusion Rich Text Editor tag helper (

<ejs-richtexteditor>

) for live editing and preview workflows in ASP.NET Core MVC or Razor Pages applications.

Syncfusion ASP.NET Core Markdown Converter是一款轻量级客户端工具（可通过CDN或npm加载），能将Markdown文本转换为整洁的语义化HTML。它支持所有常见的Markdown元素——标题、列表、表格、链接、图片和内联样式——并可与Syncfusion富文本编辑器标签助手（

<ejs-richtexteditor>

）无缝集成，在ASP.NET Core MVC或Razor Pages应用中实现实时编辑和预览工作流。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet installation and tag helper registration
CDN stylesheet and script references
Running a basic Markdown-to-HTML conversion in a Razor view
Required CSS and theme setup

📄 阅读： references/getting-started.md

NuGet安装与标签助手注册
CDN样式表和脚本引用
在Razor视图中运行基础的Markdown转HTML转换
所需CSS和主题设置

toHtml API

📄 Read: references/tohtml-api.md

```
toHtml
```
method signature and parameters (JavaScript usage from Razor views)
Supported Markdown elements (headings, lists, tables, links, images, inline styles)
Return value and usage patterns
Simple conversion code examples

📄 阅读： references/tohtml-api.md

```
toHtml
```
方法签名和参数（在Razor视图中使用JavaScript）
支持的Markdown元素（标题、列表、表格、链接、图片、内联样式）
返回值和使用模式
简单转换代码示例

Configurable Options

可配置选项

📄 Read: references/configurable-options.md

```
MarkdownConverterOptions
```
object
```
async
```
— asynchronous conversion for large content
```
gfm
```
— GitHub Flavored Markdown support
```
lineBreak
```
— single line breaks as
```
<br>
```
elements
```
silence
```
— suppress errors on invalid Markdown
When and why to use each option

📄 阅读： references/configurable-options.md

```
MarkdownConverterOptions
```
对象
```
async
```
— 针对大内容的异步转换
```
gfm
```
— 支持GitHub风格Markdown
```
lineBreak
```
— 将单个换行符转换为
```
<br>
```
元素
```
silence
```
— 抑制无效Markdown的错误提示
各选项的适用场景与原因

Rich Text Editor Integration

富文本编辑器集成

📄 Read: references/richtexteditor-integration.md

Combining
```
<ejs-richtexteditor>
```
(editorMode="Markdown") with MarkdownConverter
Live preview on keyup using
```
toHtml
```
Full preview toggle pattern
Side-by-side Splitter layout
Toolbar configuration for Markdown mode

📄 阅读： references/richtexteditor-integration.md

将
```
<ejs-richtexteditor>
```
（editorMode="Markdown"）与MarkdownConverter结合使用
使用
```
toHtml
```
实现按键时实时预览
完整预览切换模式
并排拆分布局
Markdown模式的工具栏配置

Quick Start

快速开始

razor

{{! _ViewImports.cshtml }}
@addTagHelper *, Syncfusion.EJ2

html

{{! _Layout.cshtml <head> }}
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{{! _Layout.cshtml before </body> }}
<ejs-scripts></ejs-scripts>

javascript

// Inline script in Razor view or a linked .js file
var markdownContent = '# Hello World\nThis is **Markdown** text.';
var htmlOutput = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

注册标签助手并添加CDN引用，然后运行最小化转换：

razor

{{! _ViewImports.cshtml }}
@addTagHelper *, Syncfusion.EJ2

html

{{! _Layout.cshtml <head> }}
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{{! _Layout.cshtml before </body> }}
<ejs-scripts></ejs-scripts>

javascript

// Inline script in Razor view or a linked .js file
var markdownContent = '# Hello World\nThis is **Markdown** text.';
var htmlOutput = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

Common Patterns

常见模式

Convert with all options enabled

启用所有选项进行转换

javascript

var html = ej.markdownconverter.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
});

javascript

var html = ej.markdownconverter.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
});

Live preview on user input

用户输入时实时预览

javascript

document.getElementById('textarea').addEventListener('keyup', function () {
  document.getElementById('preview').innerHTML =
    ej.markdownconverter.MarkdownConverter.toHtml(this.value);
});

javascript

document.getElementById('textarea').addEventListener('keyup', function () {
  document.getElementById('preview').innerHTML =
    ej.markdownconverter.MarkdownConverter.toHtml(this.value);
});

Integrate with Syncfusion RTE tag helper in Markdown mode

在Markdown模式下与Syncfusion RTE标签助手集成

razor

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

csharp

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "# Hello\nType **Markdown** here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

razor

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

csharp

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "# Hello\nType **Markdown** here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

Key Props

关键属性

Option	Type	Default	Purpose
`async`	`boolean`	`false`	Async conversion for large payloads
`gfm`	`boolean`	`true`	GitHub Flavored Markdown support
`lineBreak`	`boolean`	`false`	Single newlines → `<br>`
`silence`	`boolean`	`false`	Skip invalid Markdown instead of throwing

选项	类型	默认值	用途
`async`	`boolean`	`false`	针对大内容的异步转换
`gfm`	`boolean`	`true`	支持GitHub风格Markdown
`lineBreak`	`boolean`	`false`	单个换行符转换为 `<br>`
`silence`	`boolean`	`false`	跳过无效Markdown而非抛出错误

Common Use Cases

常见使用场景

Static content rendering — Convert user-authored Markdown from a textarea or controller action into HTML for display in a Razor view
Live editor preview — Pair with the Syncfusion RTE tag helper in Markdown mode for real-time HTML preview
Side-by-side editing — Use the Syncfusion Splitter tag helper to show editor and rendered HTML simultaneously
CMS / documentation tools — Process Markdown stored in a database or files before rendering inside a Razor partial view

静态内容渲染 — 将用户编写的Markdown（来自文本框或控制器操作）转换为HTML，在Razor视图中展示
实时编辑器预览 — 与Markdown模式下的Syncfusion RTE标签助手配合，实现HTML实时预览
并排编辑 — 使用Syncfusion拆分器标签助手，同时显示编辑器和渲染后的HTML
CMS/文档工具 — 在Razor局部视图中渲染之前，处理存储在数据库或文件中的Markdown