尝试发明一种基于 YAML 创建表格的新方式

陪她去流浪桃子 2025年08月10日阅读次数：450

经常在 Markdown 里面用“|”绘制表格，简单的表格没有什么问题。但是要想写点复杂的东西，马上就会变得困难起来。尝试过很多方式，想要“优雅”地编辑表格，后面全部放弃了。

现在的 Markdown 表格有什么问题？

必须用英文半角的“|”作为分隔符

这也太痛苦了，不是吗？中英文混合输入的时候光切换输入法就累死不活了。

以前用苹果自带的输入法的时候，我自定义了一个短语“vb(vertical bar)”来输入竖线，一定程度上减少了麻烦。现在五笔输入法从苹果自带的换成了鼠须管，可以自定义中文状态下就默认输出英文的“|”（同时还设置了 ` 等字符）。编辑 Markdown 文档终于轻松了很多。
单元格里面基本只能写很简单的东西

因为 Markdown 的表格规范规定了所有内容必须写在“| |”之间。所以，即便是简单地想要换个行都需要上 HTML 的 “<br>”。如果想要插入个“列表”/“表格”……全无可能，只能上 HTML。那这样的话，就体现不出 Markdown 的优点了。
不支持行合并、列合并

这个需求对于多数用户来说不是很强烈，需要合并和行/列用空白单元格代替即可。

可视化/块编辑器有多厉害？

这几天正好想研究一下前端地狱————富文本编辑器（因为网站有新用户注册进来了，想搞个简单的编辑模式）。尝试全功能集成了几款编辑器，最后结论是：没一个能打的！ 它们分别是：Editor.js、ProseKit、BlockNote、Quill。它们要么是压根不支持表格，要求是需要第三方扩展。连表格都不支持，谈啥富文本编辑啊？就加粗、加大吗？连 Apple Notes 都支持表格啊。即便通过最厉害的扩展添加了表格支持，也几乎都有以下问题：

单元格里面仍然只能写很简单的东西

我都可视化编辑了，我插入一张图片到单元格应该支持吧？那不行。正好最近学做了很多道菜，做了一个菜单，要贴做法➕️成品图，硬是给我整无语了。以为 Markdown 不行我就换可视化编辑器/块编辑器，还是不行。
图片是给你贴了，但是无法调整大小

手机随便拍一张图就是 4K 的分辨率。直接给我显示出来、不让我修改显示尺寸…… 🤬
单元格勉强可以合并，合着合着就乱套了，不给撤销
基本所有的块编辑器只允许列表里面写简单文字

引用不行、代码片段不行……

对于写过 Markdown 解析/渲染器成品的我来说，几乎知道 Markdown 的每一个细节，你们这样子限制我发挥我很沮丧。

Quill 这个编辑器整体体验是不错的，而且 GitHub Stargizer 达到了可怕的 45K+。但是在我浅度测试官方全功能的 demo 后就觉得很离谱：

图片以 100% 尺寸插入，无法修改；
公式插入后无法再次编辑，只能全部删除重写；
官方不支持表格。

官方页面描述其被很多大公司使用，有时候我觉得不可思议。

最后还是决定回到 Markdown 里面

体验了一圈可视化编辑器/块编辑器后，它们都让我纠心，或者会给后续带来更大的麻烦。

所以我还是决定手写 Markdown，所有东西随心所欲，一切全部是纯文本。

学 Hugo 支持了 CSV 直接渲染成表格

CSV 最大的优点就是写起来非常简单：

1
2
3
4
5


Year,Make,Model
1997,Ford,E350
2000,"Mercury 1
Mercury 2
Mercury 3",Cougar

Year	Make	Model
1997	Ford	E350
2000	Mercury 1 Mercury 2 Mercury 3	Cougar

但是排版方面可操作性 ≈ 0：

无法设置对齐
无法加粗等
只能是文本内容

但是还是有比 Markdown 表格强的地方：多行文本编辑更轻松。

用 YAML “发明”一款表格描述器

是的，就是云原生里面用得最多的那个家伙，也是被非常多人讨厌、诟病的 YAML，但其实我非常喜欢。以前拿 YAML 写过脑图生成器、写过文法树渲染器，不过可惜的是，两者都扔了，虽然已经有点儿 MVP 的样子了。

写这篇文章的时候，我的基于 YAML 的表格生成器/渲染器已经写好了。设计的时候就沿袭了 YAML 的可读性优点，还深度利用了 YAML 是 JSON 的超集这一点来写数组。接下来就简单展示一下，不讲实现细节了，但是其实代码量很少，仅 300+ 行，差不多只花了两天的零碎时间来编写/调试/测试/集成，有兴趣的读者自己去看。感觉它基本满足了我对表格绘制的所有需求。

直接像写 JSON 数组一样的写法

这可是合法的 YAML 哦，YAML 是 JSON 的超集！并允许不写双引号！

1
2
3


- [1,2,3]
- [4,5,6]
- [a,b,"some\ntext"]

1	2	3
4	5	6
a	b	some text

感觉上面这样的写法就可以代替简单的 CSV 和 Markdown 自带表格的写法了。

所有字段也可以拆开写，方便单独控制

拆开写之后就可以方便地控制格式、对齐等：

1
2
3
4
5
6
7
8
9


rows:
  - cols:
      - 啦啦啦、啦啦啦
      - 我是卖报的小行家
      - text: |
          this is
          a multiline
          yaml text.          
        formats: [bold,italic,ins,underline]

啦啦啦、啦啦啦	我是卖报的小行家	this is a multiline yaml text.

内嵌表格也完全不是问题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


rows:
  - cols:
      - 1
      - text content
  - - 2
    - - 123 456
      - table:
          rows:
            - [1,2,3]
            - [4,5,6]

text content

123 456

1	2	3
4	5	6

合并单元格更是容易

1
2
3
4
5
6
7
8


- - 1
  - text: 2
    colspan: 2
- - text: 4
    rowspan: 2
  - 5
  - 6
- [8,9]

1	2
4	5	6
4	8	9

甚至可以“取地址”/“解引用”

这对于写特别复杂的单元格来说极度好用。

1
2
3
4
5
6
7


cells:
  c: &c
    text: 你说什么，我听不见？
    formats: [italic,del,strike]
rows:
  - [1,2,3]
  - [a,b,*c]

1	2	3
a	b	你说什么，我听不见？

这个东西在 YAML 里面叫作“Anchor”和“Reference”。

表头和按列设置格式当然不能少

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


headers: [[1,4],1]
cols:
  2: { formats: [left]   }
  3: { formats: [center] }
  4: { formats: [right,italic,bold]  }
rows:
  - [一堆,第一列,第二列,第三列]
  - [莫名,1,22222222,3]
  - [其妙的,44444444,5,6]
  - cols: [数字,7,8,99999999]
    formats: [del]

一堆	第一列	第二列	第三列
莫名	1	22222222	3
其妙的	44444444	5	6
数字	7	8	99999999

Markdown 当然要支持

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


headers: [1,1]
cells:
  split: &split
    markdown: |
      ~~游戏真好玩儿！~~
      图片<color red>*真好看*</color>！

      ![](split.avif?s=.3)      
rows:
- [游戏,截图]
- [双影奇境,*split]

游戏	截图
双影奇境	~~游戏真好玩儿！~~ 图片真好看！

我觉得还有更简单的办法“取地址”，容我想想。

也可以用 JSON 对象的方式

1
2


- [1,2,{markdown:"***hello***"}]
- [1,2,{markdown:"随手写个列表：\n* 1\n* 2\n* 3"}]

1	2	hello
1	2	随手写个列表： 1 2 3

hello

随手写个列表：

也可以默认就是 Markdown

对于本就是 Markdown 文档来说，这样最方便了。

1
2
3
4


markdown: true
rows:
- [1,2,"***hello***"]
- [1,2,"随手写个列表：\n* 1\n* 2\n* 3"]

1	2	hello
1	2	随手写个列表： 1 2 3

hello

随手写个列表：

如何快速插入行、删除列？

目前没有好办法。反正数据都是要自己填写的，并没有步骤可省。突然觉得可视化编辑并没有那么重要了。

体验一下吗？

评论区就可以哦。语法像下面这样就行：

1
2
3
4
5


```yaml+table
# 这里
# 写表格
# 内容
```

~~但是评论的编辑器不支持自动缩进，编辑体验很糟糕。建议在代码编辑器里面写好了粘贴过来预览。~~

已支持自动缩进。