Shortcode 不文明。
绘制 Mermaid 图是一个刚需。但是我希望我的 Markdown 文件能正常在编辑器（如 vscode）内预览，又能生成正确的网页。
现在的问题是 Hugo 对 Mermaid 的支持都是用 Shortcode 实现的，这会导致预览失效。
Hugo 使用的 Goldmark 不支持给 Codeblock 添加自定义 class，而 highlight.js 也不能识别到 mermaid，因此需要从 language-fallback 里找到 Mermaid。
幸好 Mermaid 的语法开头都有固定的关键字，极大地方便了这个工作。
<link href="mermaid.css" type="text/css" rel="stylesheet"/>
<script src="mermaid.min.js"></script>
<script src="highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
const mermaidKeywords = [
"graph TD",
"graph TB",
"graph BT",
"graph RL",
"graph LR",
"sequenceDiagram",
"gantt",
"classDiagram",
"gitGraph",
"erDiagram",
"journey"
];
var elements = $(".language-fallback").each((i, element) => {
var graphDefinition = element.innerText;
if(mermaidKeywords.some((keyword) => graphDefinition.startsWith(keyword))) {
var parent = element.parentElement.parentElement;
if(parent.className == "highlight") {
parent.className = "mermaid";
parent.innerHTML = graphDefinition;
parent.align = "center";
}
}
});
</script>
用例
测试（有的来自 mermaid.js）：