在 ghost 中支持 mermaid

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

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

code injection

在管理界面的 code injection 中增加

<script src="https://unpkg.com/[email protected]/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->>+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
</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