时间戳

首页 > 解决方案 > 如何让 GitHub Pages Markdown 支持美人鱼图？

javascript - 如何让 GitHub Pages Markdown 支持美人鱼图？

问题描述

我希望通过简单的提交和推送在 GitHub 页面中使用美人鱼。

换句话说，我希望像这样写入我的降价文件

```mermaid
graph LR
   A --> B
   A -->C
   C -->D
```

并在我的 _layouts/post.html 上添加一些 js，以某种方式将其转换为美人鱼图。

我发现这个主题声称它支持这样的事情。但是这个主题对我来说太重了，js太多了，所以我以为我只能使用这个文件，这很简单

<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 开发人员看来，我没有看到与 link 建立的任何连接https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js。

我尝试了这段代码，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>

标签： javascriptjekyllgithub-pagesmermaid

解决方案

我找到了解决方案。

<!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--&gt;B
</code></pre>

<div class="mermaid">graph LR
A--&gt;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>

推荐阅读