logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 代码示例
  • 主题
  • 流式处理
    • 语法处理
    • 动画效果
  • 组件
    • 总览
    • Sources来源应用
    • Think思考过程
    • DataChart数据图表
    • Custom自定义组件
  • 插件集
    • 总览
    • Latex公式
    • HighlightCode代码高亮
    • Mermaid图表
    • CustomPlugins自定义插件
    • 主题和国际化

总览

使用插件可以使 @ant-design/x-markdown 支持更多的扩展功能,比如:Latex、代码高亮等。

插件列表

  • HighlightCode

    渲染代码高亮。
  • Latex

    渲染数学公式Latex语法。
  • Mermaid

    渲染 Mermaid 图表。

如何引入插件

可从 @ant-design/x-markdown/plugins/插件名 引入插件。

tsx
import Latex from '@ant-design/x-markdown/plugins/latex';

从浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件,并使用插件名作为全局变量 。

我们在 npm 发布包内的 dist/plugins 目录下提供了插件的构建文件,你可以直接使用。

html
<script src="**/dist/plugins/latex.min.js"></script>
<script>
const Latex = window.Latex;
</script>

自定义插件

支持基于实现 Marked 所有插件,也可通过自定义方式来插件 参考