在 ghost 中支持 mermaid

之前一直以为 ghost 支持不了 mermaid。。

最近看到某博主在 ghost 中加入了 mermaid 支持,研究了一下步骤,看起来和之前我加讨饭链接的方法差不多:

code injection

在管理界面的 code injection 中增加

<script src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

具体的版本可以看这里

因为 ghost 的 markdown editor 原生不支持 mermaid,所以要显示 mermaid 的话,需要贴 html 标签进来:

<div class="mermaid">
sequenceDiagram
    participant I as Informer
    participant SC as ServiceController
    participant Q as WorkQueue
    participant B as Balancer
    I-&gt;&gt;+SC: Add/Update/DeleteService
    SC-&gt;&gt;Q: Add
    Q--&gt;&gt;SC: return
    deactivate SC
    loop Worker
        SC-&gt;&gt;+Q: Get
        Q--&gt;&gt;-SC: key
        SC-&gt;&gt;SC: syncService
        SC-&gt;&gt;+B: EnsureLoadBalancer
        B--&gt;&gt;-SC: LoadBalancerStatus
    end
</div>

显示效果像下面这样:

sequenceDiagram participant I as Informer participant SC as ServiceController participant Q as WorkQueue participant B as Balancer I->>+SC: Add/Update/DeleteService SC->>Q: Add Q-->>SC: return deactivate SC loop Worker SC->>+Q: Get Q-->>-SC: key SC->>SC: syncService SC->>+B: EnsureLoadBalancer B-->>-SC: LoadBalancerStatus end
graph TD A --> B F --> B B --> C C --> D D --> End
在 ghost 中支持 mermaid
Share this

家境贫寒,整理不易,客官如果觉得不错欢迎打赏!我的微信 xargin_buaa,如果想交流也欢迎来加~