如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid
最近在研究通过文本和代码创建图标和可视化,Mermaid
功能比较丰富,Web支持也比较友好。如何让GitHub Pages
中通过Markdown
编辑的博客也支持Mermaid
呢?
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!-- 通过 markdown 代码块生成的 html -->
<pre><code class="language-mermaid">graph LR
A-->B
</code></pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm';
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
querySelector: '.language-mermaid',
});
</script>
</body>
</html>
graph LR
A-->B
GitHub Pages
通过Markdown
编辑的博客中:
```mermaid
graph LR
A-->B
```
然后在全局脚本模板底部添加以下内容:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm';
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
querySelector: '.language-mermaid',
});
</script>