尝试发明一种基于 YAML 创建表格的新方式
经常在 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 |
但是排版方面可操作性 ≈ 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 text |
感觉上面这样的写法就可以代替简单的 CSV 和 Markdown 自带表格的写法了。
所有字段也可以拆开写,方便单独控制
拆开写之后就可以方便地控制格式、对齐等:
1 2 3 4 5 6 7 8 9 |
|
啦啦啦、啦啦啦 | 我是卖报的小行家 | this is a multiline yaml text. |
内嵌表格也完全不是问题
1 2 3 4 5 6 7 8 9 10 |
|
1 | text content | ||||||
2 | 123 456
|
合并单元格更是容易
1 2 3 4 5 6 7 8 |
|
1 | 2 | |
4 | 5 | 6 |
8 | 9 |
甚至可以“取地址”/“解引用”
这对于写特别复杂的单元格来说极度好用。
1 2 3 4 5 6 7 |
|
1 | 2 | 3 |
a | b | 你说什么,我听不见? |
这个东西在 YAML 里面叫作“Anchor”和“Reference”。
表头和按列设置格式当然不能少
1 2 3 4 5 6 7 8 9 10 11 |
|
一堆 | 第一列 | 第二列 | 第三列 |
---|---|---|---|
莫名 | 1 | 22222222 | 3 |
其妙的 | 44444444 | 5 | 6 |
数字 | 7 | 8 | 99999999 |
Markdown 当然要支持
1 2 3 4 5 6 7 8 9 10 11 |
|
游戏 | 截图 |
---|---|
双影奇境 |
|
我觉得还有更简单的办法“取地址”,容我想想。
也可以用 JSON 对象的方式
1 2 |
|
1 | 2 | hello |
1 | 2 | 随手写个列表:
|
也可以默认就是 Markdown
对于本就是 Markdown 文档来说,这样最方便了。
1 2 3 4 |
|
1 | 2 | hello |
1 | 2 | 随手写个列表:
|
如何快速插入行、删除列?
目前没有好办法。反正数据都是要自己填写的,并没有步骤可省。突然觉得可视化编辑并没有那么重要了。
体验一下吗?
评论区就可以哦。语法像下面这样就行:
1 2 3 4 5 |
|
但是评论的编辑器不支持自动缩进,编辑体验很糟糕。建议在代码编辑器里面写好了粘贴过来预览。
已支持自动缩进。