课程需要,markdown调用mermaid绘制cMap和流程图。无奈handsome原生markdown不支持解析mermaid,直接调用有与pjax各种不兼容,只好自己魔改。。

实现方法

在主题/component/footer.php底部</html>前插入

<script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js"></script>

然后在主题后台设置pjax回调函数中插入

mermaid.init(undefined, $(".mermaid"));

理论上讲可以使用了→_→

使用方法

使用typecho原生编辑器,文章编辑时直接按照mermaid语法插入即可。

举个栗子ヾ(´・ ・`。)ノ"

!!!
<!-- 引入mermaid制图-->
<div class="mermaid">
graph TD;
    A[Hard edge] -->|Link text| B(Round edge);
    B --> C{Decision};
    C -->|One| D[Result one];
    C -->|Two| E[Result two];
</div>
!!!

其效果如下:

graph TD; A[Hard edge] -->|Link text| B(Round edge); B --> C{Decision}; C -->|One| D[Result one]; C -->|Two| E[Result two];

参考链接:

https://mermaidjs.github.io/

Last modification:July 7th, 2019 at 12:14 pm
If you think my article is useful to you, please feel free to appreciate