Markdown 中的 Table 一键排序

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2219 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景

在 Markdown 中我们经常会用到表格 , 但是手动排版太麻烦了，特别是表格排序。

在我们的开源项目 React Suite 中，组件的 API 文档，会用到大量的表格, 在写的时候随心所欲的写，发布上线，然后有人反应，包括我自己也觉得没有排序的表格，阅读起来太不爽了。

那怎么办？改呗。本来想让新来的同事去改的，然后再一看文档，80 个左右的组件再加上中英文两个版本，有 160 个左右的表格需要改，每一个表格如果要人工调整是很痛苦的。交给新同事太残忍了，还是自己写个工具解决吧。

本来想找个现成的工具，但是没找到，然后看了看类似的表格的格式化 VS Code 的插件，然后随手就改了改，写了一个可以排序的小插件，希望可以帮到您。

效果

格式化前大概长成这个样子，乱七八糟。

| name | email | description |
| -- | -- | --- |
| zhang | [email protected]  | zhang  |
| wang | [email protected]   | wang |
| li | [email protected]   | li  |
| amity | [email protected]  | amity  |
| batman | [email protected] | batman |

格式后，就整齐了，同时 name 一列按照字母排序了。

| name   | email        | description |
| ------ | ------------ | ----------- |
| amity  | [email protected]  | amity       |
| batman | [email protected] | batman      |
| li     | [email protected]     | li          |
| wang   | [email protected]   | wang        |
| zhang  | [email protected]  | zhang       |

表格的格式我用的是prettier,它提供很方便的 API。

安装

在 VS Code Extensions 中搜索: Markdown Table Sort

Batman

amity

表格

Zhang

22 条回复 • 2018-11-07 17:39:02 +08:00

yesmeck

2018-11-06 22:11:45 +08:00

我们有个脚本 https://github.com/ant-design/ant-design/blob/master/scripts/sort-api-table.js

lucifineil

2018-11-06 22:15:46 +08:00 via Android

org 大法好

simonguo

2018-11-06 22:23:35 +08:00 via iPhone

@yesmeck 这个不错

lululau

2018-11-06 22:36:06 +08:00 via iPhone

这个操作叫 tabularization，感觉 LZ 应该也是工具控，建议玩下 Emacs，玩下 org-mode，那种感觉就是再也回不去了。即便是为了和他人协作必须用 Markdown，Emacs 的 markdown-mode, 因为用了 org-tbl-mode，所以它可能也是最棒的 Markdown 编辑器了

kerr92

2018-11-06 23:04:15 +08:00

@yesmeck 原来 antd 是这么给 Markdown 表格排序的，明天借鉴一下加到公司文档的 npm scripts 里😄

quinoa42

2018-11-07 06:32:53 +08:00

踢一下馆

相关扩展：
```
Plug 'godlygeek/tabular'
Plug 'plasticboy/vim-markdown'
```

maemolee

2018-11-07 09:15:53 +08:00

比如姓名-值的表格，能按照值从大到小排列吗？

simonguo

2018-11-07 09:42:23 +08:00

@maemolee 实现上是完全可以的，不过等我过两天空了，把这些配置功能加上。

maemolee

2018-11-07 10:42:43 +08:00

@simonguo NICE

tamlok

2018-11-07 11:26:35 +08:00 via Android

@quinoa42 如果有中文，效果会怎么样？

simonguo

2018-11-07 11:41:31 +08:00

@quinoa42 如果能排序，效果会更好

Betsy

2018-11-07 12:03:20 +08:00 via iPhone

@quinoa42 想问下你这个动态图是怎么录制的，用的什么工具？

quinoa42

2018-11-07 12:42:15 +08:00

@Betsy
[Kap]( https://github.com/wulkano/kap)

quinoa42

2018-11-07 12:59:33 +08:00

@simonguo 个人觉得排序不应该是 markdown 工具的一部分（考虑到各种排序的可能性,难免会使问题变得非常复杂），如果有类似需求我会选择用 python 之类的工具事先生成表格

quinoa42

2018-11-07 13:01:51 +08:00

@tamlok

STRRL

2018-11-07 13:13:30 +08:00 via Android

@quinoa42 问一下中文字体用的什么呀？

recall704

2018-11-07 15:47:49 +08:00

当某一格的内容太多的时候还是不好使。

Daath

2018-11-07 17:15:54 +08:00

提个建议：能不能只帮我格式化每行的距离，但不要为每行排序上下位置这样的配置，忽略现在按字段名来排序了每行的上下位置。。感觉写文档的时候就已经自己有顺序的去写了。。我是手写的。。。原谅我不是自动生成的。

Daath

2018-11-07 17:18:42 +08:00

就像 6 楼那样的。。。。

Trim21

2018-11-07 17:24:32 +08:00

有可能从新同事写的工具变成了自己写的工具...

simonguo

2018-11-07 17:36:09 +08:00

@Daath 只是格式化距离的话，已经有很多插件了，甚至有些编辑器就带这样的功能。prettier 也是支持格式化。我没必要再去写一个这样的工具。
这个扩展的名字就叫 Markdown Table Sort，目的就是解决排序问题。

@quinoa42 排序同样可以做成 TableFormat 的一部分，当把 md 中的 Table 抽象在一个数组对象中以后，有什么复杂的排序不能做

Daath

2018-11-07 17:39:02 +08:00

@simonguo 恩恩。刚才在 vs 插件上已经找到了 prettier，之前没有接触过 vs 的，没怎么去搜过。哈哈，谢谢啦