如何让GitHub页面降价支持美人鱼图表?

How to make GitHub Pages Markdown support mermaid diagram?(如何让GitHub页面降价支持美人鱼图表?)
本文介绍了如何让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--&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>

这篇关于如何让GitHub页面降价支持美人鱼图表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)