时间：   |   分类：     |   阅读： 240 字 ~1分钟

mermaid

因为 Hugo 不支持 mermaid 语法，所以，笔者是以一款开源的主题为基础，搭建了一份支持 mermaid 的主题：hugo-theme-next。

下面是笔者的技术方案：

1
2
3
4
5
6

graph TD
  1["在 layouts/partials/script.html 增加对 mermmaid.js 的引用"]-->
  2["通过 $('.language-fallback') 获取 `Hugo` 不支持高亮的代码块"]-->
  3["通过 $(this).text() 获取未经渲染的文本"]-->
  4["替换为 <pre class='mermaid'> 标签"]-->
  5["强制通过 `mermaid.js`渲染"]

参考链接：mermaid 文档

0%