【拓展Markdown】为hugo渲染Mermaid绘图

2023-12-23 2024-10-01 约 373 字预计阅读 1 分钟次阅读条评论次阅读

今天打算转帖原来发过的一篇博文时，遇到了Markdown中嵌入的Mermaid无法正常显示的问题，Mermaid可以内嵌于Markdown中通过代码显示svg绘图，但是显然hugo本身不含，这篇记录如何调整hugo达到如下效果转换：

效果


调整之前

调整之后

配置方法

这里涉及到hugo中设置代码高亮的配置，我们检查hugo.toml

写入/修改：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[markup.highlight]
    codeFences = true
    guessSyntax = false  # 注意这一项
    # hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = true
    noClasses = false
    style = "monokai"
    tabWidth = 4

在./layouts/partials/下新建一个mermaid.html

写入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{{ if .Params.mermaid }}
<script
  src="https://cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"
  integrity="sha256-KqisLh8jVMBRjpNkOhH5W9VWs+F6x6vQksLqxs7+x9A="
  crossorigin="anonymous"
></script>
<script>
  // Replace mermaid pre.code to div
  Array.from(document.getElementsByClassName("language-mermaid")).forEach(
    (el) => {
      el.parentElement.outerHTML = `<div class="mermaid">${el.innerText}</div>`;
    }
  );
</script>
<style>
  /* Set svg to center */
  .mermaid svg {
    display: block;
    margin: auto;
  }
</style>
{{ end }}

然后在./layouts/_default/baseof.html引入：

1
2
3
4
<body>
    ...
    {{ partial "mermaid.html" .}}
</body>

目录

【拓展Markdown】为hugo渲染Mermaid绘图

效果

配置方法

相关内容

目录

【拓展Markdown】为hugo渲染Mermaid绘图

效果

配置方法

相关内容

另一种为hugo渲染Mermaid绘图的方式

【拓展Markdown】为hugo渲染数学公式

【网站美化】点击特效

第壹话|基本样式

第零话|Hugo建站