我希望通过简单的提交和推送在GitHub页面中使用美人鱼。
换句话说,我希望这样写在我的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
的任何连接。
我尝试了这段代码,即在开发人员视图的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>
答案 0 :(得分:2)
我找到了解决方法。
<!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>
答案 1 :(得分:2)
如果您使用的是Jekyll,并且您不介意使用插件,那么我认为以下内容可以帮助您更轻松地完成操作。
jekyll-spaceship-Je一个Jekyll插件,可为表格,mathjax,plantuml,美人鱼,youtube,emoji,vimeo,dailymotion等提供强大的支持。
https://github.com/jeffreytse/jekyll-spaceship
有两种方法可以在Jekyll博客页面中创建图表:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
或
@startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@endmermaid
上面的代码将解析为:
答案 2 :(得分:1)
您尝试使用的URL不存在。这是正确的网址:
https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
答案 3 :(得分:1)
我解决了购买在浏览器中安装Github Mermaid extensioin的问题。 实际上,他们支持Chrome,Opera和Firefox。
我正在使用Chrome:https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en
答案 4 :(得分:0)
我遇到了类似的问题,最终只使用了一个自定义的jekyll插件。如果您能够使用自定义插件,则以下内容将用元素替换美人鱼的markdown代码块。
Jekyll::Hooks.register :posts, :pre_render do |post, payload|
docExt = post.extname.tr('.', '')
# only process if we deal with a markdown file
if payload['site']['markdown_ext'].include? docExt
newContent = post.content.gsub(/```mermaid([^`]+?)```/, '<div class="mermaid">\1</div>')
post.content = newContent
end
end