我希望通过简单的提交和推送在 GitHub-pages 中使用美人鱼。
换句话说，我希望像这样在我的 markdown 文件中写
```mermaid
graph LR
A --> B
A -->C
C -->D
```
并在我的 _layouts/post.html 上添加一些 js 以某种方式将其转换为美人鱼图。
我找到了这个 theme声称它支持这样的事情。但是这个主题对我来说太重了，js太多了，所以我想我只能用这个file , 这很简单
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
在我的 _include/mermaid.html 中，我将 {{ _sources.mermaid }} 替换为美人鱼 cdn
<script>
window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
还是不行。在我的帖子中，它显示为常规代码块，而不是美人鱼图。
编辑:在 chrome 开发者看来，我没有看到链接 https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.
我试过这段代码，在开发者 View 中的 network 标签中建立了与美人鱼的连接，但美人鱼图仍然不起作用
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
startOnReady:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>
最佳答案
我找到了解决方案。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
</head>
<body>
<pre><code class="language-mermaid">graph LR
A-->B
</code></pre>
<div class="mermaid">graph LR
A-->B
</div>
</body>
<script>
var config = {
startOnLoad:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
</html>关于javascript - 如何让GitHub Pages Markdown支持美人鱼图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53883747/