如何让GitHub页面降价支持美人鱼图表？ [英] How to make GitHub Pages Markdown support mermaid diagram?
本文介绍了如何让GitHub页面降价支持美人鱼图表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在GitHub页面中使用美人鱼，只需简单的提交和推送。
换句话说，我希望像这样写入我的减价文件
```mermaid
graph LR
A --> B
A -->C
C -->D
```
并在my_layout/post.html上添加一些js，以某种方式将其转换为美人鱼图形。
我发现这个theme声明支持这样的东西。但是这个主题看起来对我来说太重了，js太多了，所以我想我只能用这个file，简单的
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
在my_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的任何连接。
我尝试了此代码，这是开发人员视图中network标记中建立的与美人鱼WES的连接，但美人鱼图表仍然不起作用
<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>这篇关于如何让GitHub页面降价支持美人鱼图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
