Vim 插件:可视化你的 Markdown

背景

一直以来,我都偏爱文本编辑器,原因有二:

  • 一是因为鼠标操作慢(买不起鼠标😂);
  • 二是因为文本编辑快,不会产生冗余的不确定信息(比如人为操作带来的样式、位置信息),且存储方便。

所以我几乎从来没有用过脑图之类的工具,偶尔有需求也不过是用 Markdown 列个提纲。

但是当内容复杂到一定程度时,大脑内存不够用,就会理不清楚了,Markdown 的折叠可以部分解决这个问题,但是不得不承认脑图作为一个可视化工具是非常直观的。

Markmap

于是,我想实现一个 Markdown 转脑图的工具。

起先我是想找个现成的工具,于是发现了 markmap 这个大神器。它的实现原理是这样的:

  • 先用 Remarkable 做 Markdown 的解析
  • 然后基于 d3 做可视化
  • 再结合一些 JavaScript 代码,实现网页交互,可以折叠和展开节点

这个实现思路和我预想的一致,所以基本就选用它了。而且它内置了一个 colorful 的配置,可以将节点按分支展示成不同的颜色,这个功能我很喜欢。

Vim 插件

基于 markmap 强大的能力,再结合我日常使用的 Vim,就有了这个插件:https://github.com/gera2ld/coc-markmap

为了 Markdown 的渲染以及交互,JavaScript 自然是最好的选择,所以我选择了基于 coc.nvim 来实现这个插件。

coc.nvim 已经提供了非常友好的 API,那剩下的事情就简单了:

  • 获取当前 buffer 内容
  • 解析 Markdown,生成 mindmap 数据
  • 填充数据到模板,生成最终的脑图 HTML

就这样一气呵成,就可以在浏览器中开心地整理思路了。

markmap

快去这里点个 Star 吧。


© 2020