Typecho下Mermaid的使用
2022年 11月 06 日

WhiteBear

前言

Mermaid是一个用文本语法来描述文档图形 (流程图、 时序图、甘特图) 的工具,这里主要讲如何引入使用

安装

首先引入

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.14.0/mermaid.min.js" type="application/javascript"></script>

这里使用的是字节跳动提供的源。
然后加入代码

mermaid.initialize({startOnLoad:true});

现在这个时候已经基本完成了,但最重要的一点就是mermaid默认是查找文章中所有类为mermaid包裹的内容,所以这个时候你需要将使用mermaid的内容包裹起来,例如:

<div class="mermaid">Mermaid</div>

问题解答

这个时候就有同学问了,如果我不想要这个mermaid,想要更改这个类名怎么处理。
也好办,把下面这串代码加到刚才那串代码的后面:

mermaid.init(".test");

这个test就是你可以自定义的类名

Typecho文章中可能会对HTML标签进行过滤,所以也需要进行相应的处理。

如果不想这么麻烦的话已经有一款插件给你解决了这个问题。

mrgeneralgoo/typecho-markdown
139 更新于2022-06-17 16:06:37

这个插件默认是使用mermaid类,若要更改可修改该插件目录下的ParsedownExtension.php第228行'class' => 'mermaid',把这个mermaid更改为你想要的即可。

Pjax下需要将以下代码放入Pjax的complete或end
mermaid.init(".类名");
这个类名是你自己自定义的类名,若是使用默认的mermaid,直接mermaid.init();即可

Typecho下Mermaid的使用

前言

Mermaid是一个用文本语法来描述文档图形 (流程图、 时序图、甘特图) 的工具,这里主要讲如何引入使用

安装

首先引入

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.14.0/mermaid.min.js" type="application/javascript"></script>

这里使用的是字节跳动提供的源。
然后加入代码

mermaid.initialize({startOnLoad:true});

现在这个时候已经基本完成了,但最重要的一点就是mermaid默认是查找文章中所有类为mermaid包裹的内容,所以这个时候你需要将使用mermaid的内容包裹起来,例如:

<div class="mermaid">Mermaid</div>

问题解答

这个时候就有同学问了,如果我不想要这个mermaid,想要更改这个类名怎么处理。
也好办,把下面这串代码加到刚才那串代码的后面:

mermaid.init(".test");

这个test就是你可以自定义的类名

Typecho文章中可能会对HTML标签进行过滤,所以也需要进行相应的处理。

如果不想这么麻烦的话已经有一款插件给你解决了这个问题。

mrgeneralgoo/typecho-markdown
139 更新于2022-06-17 16:06:37

这个插件默认是使用mermaid类,若要更改可修改该插件目录下的ParsedownExtension.php第228行'class' => 'mermaid',把这个mermaid更改为你想要的即可。

Pjax下需要将以下代码放入Pjax的complete或end
mermaid.init(".类名");
这个类名是你自己自定义的类名,若是使用默认的mermaid,直接mermaid.init();即可

赞 (8)

评论区(6条评论)

我要评论


东东
LV1

看到了,我想问一下博主,用https://github.com/ShunCai/QZoneExport 这个插件导出来的说说内容,如何导入到说说里面呢?博主研究研究

东东
LV1
东东

https://demo.lvshuncai.com/qzone-export/Messages/index.html
这是预览页面,可以导出来内容,就是我想将这个内容导入到博客里面,该如何做呢?

回复 0
admin
博主
东东

你可以自己研究研究

回复 2
东东
LV1

微语是哪个插件呢?博主,请教

临窗往事
LV1
东东

不是插件,独立页面,选择微语模板

回复 2
临窗往事
LV1

我来踩一下。

回复 1