Markdown内容渲染

Markdown 是一个功能强大的 Markdown 渲染组件，支持代码高亮、组件渲染和自定义渲染函数。

何时使用

需要渲染带有语法高亮的 Markdown 内容时
想要在 Markdown 内容中嵌入交互式 Blazor 组件时
需要为特定代码块类型自定义渲染时
需要在内容中显示数学公式时

代码演示

基本用法

最简单的 Markdown 渲染示例，展示了基本的 Markdown 语法支持，包括：

标题和文本格式化
列表
代码块和语法高亮
表格

自定义渲染

通过 AddRender 方法添加自定义渲染函数，可以为特定类型的代码块定义自定义渲染逻辑：

使用 alert、info、warning 等语言标识符创建不同样式的提示框
自定义图表渲染
完全自定义的渲染逻辑

API#

Markdown

参数	说明	类型	默认值
Content	要渲染的 Markdown 内容	string	-
Pipeline	自定义的 Markdig 处理管道	MarkdownPipeline	null
Class	CSS 类名	string	-
Style	样式属性	string	-
ComponentParameters	传递给渲染组件的全局参数	Dictionary<string, object>	null

方法

名称	说明
AddRender	为特定代码块类型添加自定义渲染函数
RemoveRender	移除自定义渲染函数
ClearRenders	清除所有自定义渲染函数

代码块类型

内置类型

component: 渲染带参数的 Blazor 组件
chart: 渲染 Chart.js 图表
table: 渲染交互式表格
form: 渲染表单组件
antd: 渲染 Ant Design 组件

自定义类型

您可以使用 AddRender 方法为任何代码块类型添加自定义渲染函数：

markdownX.AddRender("alert", content => builder =>
{
    builder.OpenElement(0, "div");
    builder.AddAttribute(1, "class", "custom-alert");
    builder.AddContent(2, content);
    builder.CloseElement();
});

代码示例

基本用法

最简单的 Markdown 渲染示例，展示了基本的 Markdown 语法支持。

组件渲染

在 Markdown 内容中嵌入交互式组件。

自定义渲染

添加自定义渲染函数，处理特殊的代码块类型。