从 Markdown 创建可交互的脑图

上一篇文章介绍了我突发奇想,创建的一个 Vim 插件,在 Reddit 打了一拨广告后,获得了不错的反响。

为了让这个功能更加易用,我又创建了一个 Gatsby 插件,用于快速地在博客中插入脑图。


插件原理如下:

  • 在 Markdown AST 中找到所有的 markdown 代码块
  • <!-- render-as-markmap --> 开头的 markdown 代码块,使用 markmap 解析一下
  • 生成对应代码替换到原文中

举个例子:

```markmap
# 今天吃什么
## 早上
- 一个肉包
- 两个烧麦
- 一杯豆浆
## 中午
- 大碗宽面
- 肉夹馍
## 晚上
- 一碗米饭
- 两片瘦肉
```

再也不用担心图片内容不能及时更新的问题,而且还可以与读者交互,很棒有没有?

快去这里点个 Star 吧。


© 2020