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

陪她去流浪 桃子 阅读次数:330

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

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

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

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

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

  2. 单元格里面基本只能写很简单的东西

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

  3. 不支持行合并、列合并

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

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

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

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

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

  2. 图片是给你贴了,但是无法调整大小

    手机随便拍一张图就是 4K 的分辨率。直接给我显示出来、不让我修改显示尺寸…… 🤬

  3. 单元格勉强可以合并,合着合着就乱套了,不给撤销

  4. 基本所有的块编辑器只允许列表里面写简单文字

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

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

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

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

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

最后还是决定回到 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:

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

但是还是有比 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"]
123
456
absome 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]
1text content
2

123 456

123
456

合并单元格更是容易

1
2
3
4
5
6
7
8
- - 1
  - text: 2
    colspan: 2
- - text: 4
    rowspan: 2
  - 5
  - 6
- [8,9]
12
456
89

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

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

1
2
3
4
5
6
7
cells:
  c: &c
    text: 你说什么,我听不见?
    formats: [italic,del,strike]
rows:
  - [1,2,3]
  - [a,b,*c]
123
ab你说什么,我听不见?

这个东西在 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]
一堆第一列第二列第三列
莫名1222222223
其妙的4444444456
数字7899999999

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"}]
12

hello

12

随手写个列表:

  • 1
  • 2
  • 3

也可以默认就是 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

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

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

体验一下吗?

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

1
2
3
4
5
```yaml+table
# 这里
# 写表格
# 内容
```

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

已支持自动缩进。