使用 markdown-it,如何支持 mermaid
时间: 2024-05-12 10:15:11 浏览: 15
要在 markdown-it 中支持 mermaid,需要安装 `markdown-it-mermaid` 插件。可以按照以下步骤进行操作:
1. 安装 `markdown-it-mermaid` 插件:
```
npm install markdown-it-mermaid --save-dev
```
2. 在代码中使用 `markdown-it-mermaid`:
```js
const MarkdownIt = require('markdown-it');
const mermaid = require('markdown-it-mermaid');
const md = new MarkdownIt();
md.use(mermaid);
const result = md.render(`
\`\`\`mermaid
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`);
console.log(result);
```
在上面的例子中,我们首先引入了 `markdown-it` 和 `markdown-it-mermaid`,然后创建一个 MarkdownIt 实例,并使用 `mermaid` 插件。最后,我们使用 Markdown 语法书写了一个 Mermaid 图表,并将其渲染为 HTML。
注意,为了正确渲染 Mermaid 图表,还需要在 HTML 中引入 Mermaid 的 JavaScript 库。可以通过以下方式在 HTML 中引入:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: true
});
</script>
```
这样就完成了在 markdown-it 中支持 Mermaid 的配置。