dhjddcn / halo-theme-butterfly

一个Halo博客主题,Butterfly 🦋
GNU General Public License v3.0
414 stars 97 forks source link

mermaid语法不支持 #131

Closed ScienGU closed 1 year ago

ScienGU commented 1 year ago

是什么版本出现了此问题?

2.0.5

Halo 版本

2.6.0

主题 版本

2.0.5

平台

桌面端

操作系统

Mac

浏览器

Chrome

在线站点地址

https://blog.sciengu.cn/archives/1692863606281

描述缺陷

md语法中mermaid语法相关的代码不能转为svg图

如何复现

使用如下md代码

graph TD
  A1((Kotlin)) --> A2(编译器)
  B1((Clojure)) --> B2(编译器)
  C1((Groovy)) --> C2(编译器)
  D1((Scala)) --> D2(编译器)
  E1((Jython)) --> E2(编译器)
  F1((JRuby)) --> F2(编译器)
  G1((JavaScript)) --> G2(编译器)
  subgraph 语言
    A1
    B1
    C1
    D1
    E1
    F1
    G1
  end
  A2 --> H(字节码文件\nCAFEBABE)
  B2 --> H
  C2 --> H
  D2 --> H
  E2 --> H
  F2 --> H
  G2 --> H
  H --> I(Java虚拟机)

期望结果

能正常生成svg

image

附加信息

No response

ScienGU commented 1 year ago

解决了,在console后台,点击【设置】->【代码注入】->【页脚】,添加下面的脚本

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/+esm';
  var config = {
    startOnLoad: true,
    flowchart: {
      useMaxWidth: false,
      htmlLabels: true
    }
  };
  var a = document.getElementsByClassName('language-mermaid')
  for (var i = 0, len = a.length; i < len; i++) {
    a[i].style.textAlign = 'center'
    mermaid.initialize(config);
    mermaid.init(undefined, a);
  }
</script>