TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
扩展markdown增加mermaid支持画图
9019
人阅读
2020/4/13 22:11
总访问:
3997027
评论:
0
收藏:
0
手机
分类:
前端
>我看网上没有什么资料,只有说怎么去用它,没有说怎么才能用它。那就自己慢慢研究在让markdown支持,要自己实现这个必须要看源码,看懂它渲染的逻辑,然后修改源码,其实也挺好的,看懂源码后面自己还想要扩展什么功能也方便! ####要想让自己的markdown支持mermaid先要看看mermaid的资料 官网: https://mermaidjs.github.io/#/ >吐槽一下资料是真的不好找 就在首先往下滑,会看到一个Example ![](https://img.tnblog.net/arcimg/aojiancc2/f91520bcce8048bc9c0685bf62e2a11f.png) 点击进去之后就可以看到,html和js资源 ![](https://img.tnblog.net/arcimg/aojiancc2/a2fa8fecba1e4494ac3916d4b6ceac8a.png) >吐槽一下这个js文件是真的大,7.1版本的就算是压缩过的也是800多kb啊,高版本的更大,这样加载一个js多影响效率啊 ####然后分析这个index.html可以发现 其实渲染mermaid只需要一个js,也是牛掰只是真的太特么大了 讲过分析其实它的渲染一个带class="mermaid"的div即可 ![](https://img.tnblog.net/arcimg/aojiancc2/a4dae6a03d0b45618c132f1643dbae2f.png) 感觉渲染还是挺简单的,如果想让markdown支持话,需要自定义语法,然后自定义解析。 ####然后去分析markdown的源码,看看怎么自定义解析的标签 #####可以参考流程图和时序图的插入方式! ![](https://img.tnblog.net/arcimg/aojiancc2/13fc1821c2004fa4a2d8f33cc30a9fb0.png) 讲过对源码的分析,发现源码中markedRenderer方法就是对marked的渲染 比如流程图时序图什么的 ![](https://img.tnblog.net/arcimg/aojiancc2/40b91d347757435496df1a3d72991c22.png) 而且测试的时候发现输入内容的时候!都会执行一遍都会渲染哇!预览效果吧 其实也就是渲染三个点开头的 ![](https://img.tnblog.net/arcimg/aojiancc2/408f5fccf7be47299ea057c473b7fdc5.png) 就是这个方法:l.code = function (e, i, o) ![](https://img.tnblog.net/arcimg/aojiancc2/3e0811f85a694c94aef69f89c31e751f.png) 我们根据输出的格式看就知道是解析三个点这种格式的,可以看看输出的效果 ![](https://img.tnblog.net/arcimg/aojiancc2/0a991455611d4e9a930a2f1ba8702932.png) I就是标志:这里是flow E其实就输入的内容! 所以我猜想要支持自定义mermaid格式,是不是在这里加一个解析就行了! ![](https://img.tnblog.net/arcimg/aojiancc2/6896b59d46a84a9cb492fed3fa2cb6bd.png) 哈哈加上这句话后就真的会生成这样一个div! ![](https://img.tnblog.net/arcimg/aojiancc2/9e81ff41a4a5474fbad7ebfcce53adaf.png) 哈哈哈,然后就剩下渲染了!不过这个js800多kb也太大了接近1m了….emmmm,这个太影响加载速度了吧 看看画图的效果: ![](https://img.tnblog.net/arcimg/aojiancc2/f2a0482397c74149971a0f220647971a.png) 当然渲染过程也是坑多得很.....这里暂时先不说了...搞得太久了 ![](https://img.tnblog.net/arcimg/aojiancc2/d9fe29d9e59b4d51b90a376f3a55e804.gif)
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}