解析markdown_Markdown与思维导图的碰撞之旅

第一次接触Markdown,还是在几年之前。

当时简书刚刚出来,它简洁的版面很讨自己喜欢,于是便注册了一个账号,开始在上面写文章。

简书一开始就支持富文本编辑器和Markdown编辑器。对于当时的自己而言,Markdown还是个从来没有听说过的东西,看了简书官方的推荐文档,觉得很不错,至少对于自己写文章来说,是提高了便利性。

45fd4da6ddc52f9735b87bf677bdbdc2.png

要知道,在这之前,使用富文本编辑器,要么一遍写文章一些调整样式、要么写完文章然后调整样式。调整样式的过程,虽然简单,但是繁琐,大把的时间浪费在文章样式排版的调整上,简直不能忍。虽然不能忍,但也无可奈何,直到遇见Markdown。

Markdown的劣势是显而易见的。

首先,Markdown作为HTML的子集,自身支持的文本结构有限。

其次,Markdown自身没有对标签进行样式渲染的能力,需要依赖于第三方的解析和渲染,这就导致各家对Markdown语法的样式渲染得不一样。

这些劣势招致了很多追求功能强大和自由度的使用者的不满意,在他们眼中,Markdown无异于一个残废。

0ade42242fa4b30e03a8e8364c5813f5.png

正所谓,汝之蜜糖,吾之砒霜。

对于轻量级的网络写作者而言,Markdown的这些劣势,恰恰是其优势,恰恰是使用Markdown的理由。

这些轻量级的网络写作者,所需要文章的样式没有那么多,不需要各种花里胡哨的东西填充到文章之中,Markdown就保证了其简洁性。

基于Markdown语法和对于文本结构的简洁性,其也保证了第三方的渲染服务千差万别,但是核心的文本结构和全局样式是统一的,不用担心自己的排版与最终呈现的结果会有差异。

也是因为这样的原因,我在网络上的文章写作逐步转移到了Markdown。

再来说说思维导图

思维导图在刚刚兴起的时候,被各种介绍思维方法、效率提升的文章传得神乎其神。我一看,这不就是咱们从小接触的列大纲,一二三吗,把思想的核心点、关键点全局性地罗列起来。感情大多数人都张口就来,提笔就写,没有全局性地考虑过结构和顺序,思维导图也成了一个高效的思维工具。

b6855c211592150f892508ee44c733a2.png

吐槽归吐槽,思维导图对于梳理事物的结构还是很有帮助的。

州的先生在写文章或者开发新项目的时候,也会用思维导图列出整个文章或项目的结构框架、结构框架下的子框架,然后细化到具体的内容。这样,再对其转换为实际的结构,比如文章标题、子标题、子内容主题等;比如、一个爬虫项目、请求模块、数据解析模块、数据存储模块,不同的模块之下又拆分不同的子模块,最后只需要把相应的代码填充到其中即可。

对于思维导图工具,客户端上一般使用XMind。

cb3b609ebeebe7e034bb41a3bbffbdcf.png

Web端的话,百度脑图也是比较好用的。

ac816deb93afbd5023bb5de3b62ff730.png 一般在思维导图制作完成之后,会直接保存下来或者保存为图片,以分享给别人。这种形式对于独立的思维导图来说,是没有任何问题的。 但是在一些场景下,需要把思维导图插入到文章之中,怎么办呢? 可以以图片的形式插入,但是如果思维导图层级过多,一个体验不好的地方是其排版会有偏差,要不然图片被限制在一个宽高、要不然图片占用了大量的版面,而且以图片方式插入的思维导图还丧失了伸缩子节点的功能,造成的体验很是不好。 以Markdown的方式来绘制思维导图,无疑是一个解决方案。目前互联网上也有很多支持将Markdown语法渲染为思维导图的组件,比如百度脑图的核心组件——kityminder。 9cd10350c11f28aba0ca6242f25a8d0f.png 又比如另一个开源组件——markmap: b1b801e5f3d8fd223151d79409041296.png 综合权衡和考虑,最终选择了markmap-lib这个组件作为渲染Markdown为思维导图的前端组件。 376a33d8247d281b3f1a6d2667dab8f7.png markmap支持直接将Markdown语法内容按照标题到内容的顺序渲染为SVG格式的思维导图。并且渲染出来的思维导图可缩放、可点击展开收起子节点,同时样式也很美观: 88a42f96adc1facff8d57c21a4b98b11.png 在确定好前端渲染组件之后,为了能够让其能够更好地与Markdown配合,州的先生选择了使用Markdown的块代码+自定义的语言名称作为在Markdown中绘制思维导图的语法,如下代码所示:
```mindmap# 主题## 主题1### 子节点1## 主题2```
这样,我们就可以在写Markdown的时候通过添加块代码的方式来快速绘制思维导图,如下图所示:

b693ddfb47699a411ef3697d80285bbf.png

这可能是州的先生目前为止,最为满意的在Markdown中绘制思维导图的方式了。 如果需要细致地体验,可以下载安装 MrDoc ,点击新建文档进行测试体验。 源码地址为: [1]GitHub:https://github.com/zmister2016/MrDoc [2]Gitee:https://gitee.com/zmister/MrDoc/ MrDoc,一个开源的在线文档系统,私有化文档、笔记和知识管理工具 记录文档、汇聚思想
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值