让数据库运行在 Markdown 文档中：这是真的吗？

上周三看到朋友圈在疯狂的刷 TiDB-Wasm [1] 这个有意思的东西（让数据库运行在浏览器里？TiDB + WebAssembly 告诉你答案）。这的确是一件让人兴奋的工作成果，为 Wasm 的应用提供了不错的思路。就这个项目本身而言也是有很大的价值。

我们在编程语言学习的时候，有诸如 JSFiddle [2]、Go Playground [3]等很多不同的交互性环境可以使用，并且可以将这些环境内嵌到教学文章之中，形成了交互性的教学资料。但是在数据库的文章之中，只能是纯粹的纸上谈兵，读者很难进行直观的感受与实操。

相比较而言，纯粹的编程语言的交互环境对于服务端资源消耗是可控的，成本也是可以承担得起的。数据库不一样，一个简单的索引优化的示例数据可能就需要 GB 级别的内存占用以及更大的 CPU 消耗，成本上难以承受。而 TiDB-Wasm 版本的出现，解决了这一个问题——因为是在客户端构建环境，环境成本由对应的读者承担。基于这个前提，我想到的就是可以把 TiDB-Wasm 版本作为数据库的 Play Ground 环境嵌入到 Markdown 中进行交互。

• 直接从 https://play.pingcap.com [4] 中把相关资源下载，分析了程序的处理流程（稍后将介绍插件的工作原理）。这个过程有个有意思的发现，在部署的时候，Wasm 程序被伪装成了main.css这个名字，这个让我花费了几分钟。我觉得这个伪装的目的仅仅是为了复用 Nginx 的压缩缓存策略。

• 寻找一款 Markdown 解析器可以方便的内嵌自定义标签。最终通过半小时的搜索与学习，定位到了 markdown-it 以及 markdown-it-container 这两项工作。

• 这款解析器必须是前端可以工作的。

• 这款解析器必须支持插件系统。

• 花费了 1 个小时学习了 markdown-it 的 API 与 markdown-it-container 的源码与工作原理。

• 开始进行 Demo 验证阶段。

• 进行了简单的代码重构，进行了简陋的封装。

• 开发了 Example 程序。

• 感谢来自社区的朋友 JinSong [5] 对 Example 进行了基本重构，稍微好看了一点。

::: tisql        SELECT * FROM USERS;
| 固定tag内容     | sql 内容 |

详情见 demo 程序。

1. 目前已知在 Chrome 环境容易崩溃。

2. Wasm 程序体积较大，需要进行 tiny 处理。

3. 目前仅支持一个文档单个数据库实例（基于性能考量）。

4. 还需要定义好的 Markdown 定义方法来描述数据库的交互行为。