Hugo博客添加mermaid作图

素履coder

发布于 2022-02-17 06:48:14

1K00

代码可运行

文章被收录于专栏：素履coder素履coder

运行总次数：0

代码可运行

1.添加方法

先在layouts/shortcodes目录下添加一个叫做mermaid.html文件，里面的内容如下

<div class="mermaid">
  {{.Inner}}
</div>

然后在layouts/partials/header.html文件下添加如下代码

{{ if (.Params.mermaid) }}
<!-- MermaidJS support -->
<script async src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
{{ end }}

然后在每次写文章时在头部的 front matter 添加开启如下字段

mermaid: true #是否开启mermaid

可以在archetypes/defaults.md里加入上面的设置，这样每次创建posts时都会自动添加这个字段

2.使用方法

直接输入如下格式：

结果如下

可以通过html包裹的方式使其居中

<div align=center>

    这里输入mermaid语法

</div>

如下

官方使用方法、语法、作图的链接在这里：

https://mermaid-js.github.io/mermaid/#/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-28，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

Hugo博客添加mermaid作图

Hugo博客添加mermaid作图

1.添加方法

2.使用方法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐