在 Markdown 中支持 Wiki Tables

陪她去流浪 桃子 2023年11月21日 编辑 阅读次数:1173

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

我经常会画一些表格来记录📝对比图,比如芯片选型对比图(官方真的没有):

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

代码

代码一如既往是用 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 & ButterPieBunsDanishCroissant
CheeseIce creamButterYogurt

有样式有 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
FruitsFats
OrangeButter
PearPie
AppleIce 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 headerSecond header
Upper leftUpper middleRight side
Lower leftLower middle
Text before a nested table...
A table in a table
AAABBB

标签:Markdown