在 Markdown 中支持 Wiki Tables

最近整理自己的旧项目的时候发现了一个前几年写的“根据 Yaml 生成 HTML 表格”的代码片段，可以简单想像成一种“思维导图”生成工具。 在 Yaml 中用数组的方式不停地扩张开来，是不是挺像思维导图的展开方式？😄。 不知道后来为什么放弃了，今天准备归档的时候，觉得有点食之无味、弃之又可惜。于是想把它改成个什么东东。 于是就有了今天的主角，在 Markdown 中使用 Wiki Tables！

我经常会画一些表格来记录📝对比图，比如芯片选型对比图（官方真的没有）：

• 比如这种：ESP32 型号对比；
• 以及五十音学习图（没公开），很大一张表格；
• 以及：Bash 终端常用快捷键总结

这些表格不能说复杂，但用经典的 GitHub Flavored Markdown 是做不出来的，除非纯手写 HTML。 会哭的，大量的 <td>、<tr>，Tags 已经多于正文了，惨不忍睹。可以看看这个关于上面👆的第三篇文章的对比链接（我之前真的是手写的）。

代码

• 仓库地址：https://github.com/movsb/goldmark-wiki-table。
• 讨论地址：https://github.com/yuin/goldmark/discussions/428。

代码一如既往是用 Go 实现的，果然没有 500 行。 解析的方式依然是最爱的手写递归下降解析器。 具体的使用方式见仓库就行，里面有说明。我博客已经集成了，目前还没有集成到 VSCode 里面。在找同事看看有没有好心人能帮忙写一个🥹。

同时还写了个 Live Demo（GitHub 的 Pages 真是超级好用）。 用 Go 写的，然后编译成 WebAssembly，注入到 JS 环境中。

示例

随便举几个例子。官方的有些例子与 Markdown 有重叠或冲突，就没有实现。具体的支持特性与不支持特性还没有列出来。

TODO 我应该弄一个 All in One 的例子😄。

带 rowspan、colspan 的：

{| class="wikitable"
!colspan="6"|Shopping List
|-
|rowspan="2"|Bread & Butter
|Pie
|Buns
|Danish
|colspan="2"|Croissant
|-
|Cheese
|colspan="2"|Ice cream
|Butter
|Yogurt
|}

Shopping List
Bread & Butter	Pie	Buns	Danish	Croissant
	Cheese	Ice cream		Butter	Yogurt

有样式有 Caption：

{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|Food complements
|-
! style="color:green" | Fruits
! style="color:red" | Fats
|-
|Orange
|Butter
|-
|Pear
|Pie
|-
|Apple
|Ice cream
|}

Food complements

Fruits	Fats
Orange	Butter
Pear	Pie
Apple	Ice cream

表格中包含表格：

{|
|+ An example table
|-
! First header
! colspan="2" | Second header
|-
| Upper left
| Upper middle
| rowspan="2" | Right side
|-
| Lower left
| Lower middle
|-
| colspan="3"| Text before a nested table...
{|
|+ A table in a table
| AAA
| BBB
|}
|}

An example table

First header	Second header
Upper left	Upper middle	Right side
Lower left	Lower middle
Text before a nested table... A table in a table AAA BBB