V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
simonguo
V2EX  ›  分享创造

Markdown 中的 Table 一键排序

  •  
  •   simonguo · 2018-11-06 22:05:43 +08:00 · 3743 次点击
    这是一个创建于 1969 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景

    在 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

    22 条回复    2018-11-07 17:39:02 +08:00
    yesmeck
        1
    yesmeck  
       2018-11-06 22:11:45 +08:00   ❤️ 1
    lucifineil
        2
    lucifineil  
       2018-11-06 22:15:46 +08:00 via Android
    org 大法好
    simonguo
        3
    simonguo  
    OP
       2018-11-06 22:23:35 +08:00 via iPhone
    @yesmeck 这个不错
    lululau
        4
    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
        5
    kerr92  
       2018-11-06 23:04:15 +08:00
    @yesmeck 原来 antd 是这么给 Markdown 表格排序的,明天借鉴一下加到公司文档的 npm scripts 里😄
    quinoa42
        6
    quinoa42  
       2018-11-07 06:32:53 +08:00   ❤️ 2
    踢一下馆


    相关扩展:
    ```
    Plug 'godlygeek/tabular'
    Plug 'plasticboy/vim-markdown'
    ```
    maemolee
        7
    maemolee  
       2018-11-07 09:15:53 +08:00
    比如 姓名-值 的表格,能按照 值 从大到小排列吗?
    simonguo
        8
    simonguo  
    OP
       2018-11-07 09:42:23 +08:00
    @maemolee 实现上是完全可以的,不过等我过两天空了,把这些配置功能加上。
    maemolee
        9
    maemolee  
       2018-11-07 10:42:43 +08:00
    @simonguo NICE
    tamlok
        10
    tamlok  
       2018-11-07 11:26:35 +08:00 via Android
    @quinoa42 如果有中文,效果会怎么样?
    simonguo
        11
    simonguo  
    OP
       2018-11-07 11:41:31 +08:00
    @quinoa42 如果能排序,效果会更好
    Betsy
        12
    Betsy  
       2018-11-07 12:03:20 +08:00 via iPhone
    @quinoa42 想问下你这个动态图是怎么录制的,用的什么工具?
    quinoa42
        13
    quinoa42  
       2018-11-07 12:42:15 +08:00
    quinoa42
        14
    quinoa42  
       2018-11-07 12:59:33 +08:00
    @simonguo 个人觉得排序不应该是 markdown 工具的一部分(考虑到各种排序的可能性,难免会使问题变得非常复杂),如果有类似需求我会选择用 python 之类的工具事先生成表格
    quinoa42
        15
    quinoa42  
       2018-11-07 13:01:51 +08:00
    STRRL
        16
    STRRL  
       2018-11-07 13:13:30 +08:00 via Android
    @quinoa42 问一下 中文字体用的什么呀?
    recall704
        17
    recall704  
       2018-11-07 15:47:49 +08:00
    当某一格的内容太多的时候还是不好使。
    Daath
        18
    Daath  
       2018-11-07 17:15:54 +08:00
    提个建议:能不能只帮我格式化每行的距离,但不要为每行排序上下位置这样的配置,忽略现在按字段名来排序了每行的上下位置。。感觉写文档的时候就已经自己有顺序的去写了。。我是手写的。。。原谅我不是自动生成的。
    Daath
        19
    Daath  
       2018-11-07 17:18:42 +08:00
    就像 6 楼那样的。。。。
    Trim21
        20
    Trim21  
       2018-11-07 17:24:32 +08:00
    有可能从新同事写的工具变成了自己写的工具...
    simonguo
        21
    simonguo  
    OP
       2018-11-07 17:36:09 +08:00
    @Daath 只是格式化距离的话,已经有很多插件了,甚至有些编辑器就带这样的功能。prettier 也是支持格式化。 我没必要再去写一个这样的工具。
    这个扩展的名字就叫 Markdown Table Sort, 目的就是解决排序问题。

    @quinoa42 排序同样可以做成 TableFormat 的一部分,当把 md 中的 Table 抽象在一个数组对象中以后,有什么复杂的排序不能做
    Daath
        22
    Daath  
       2018-11-07 17:39:02 +08:00
    @simonguo 恩恩。刚才在 vs 插件上已经找到了 prettier,之前没有接触过 vs 的,没怎么去搜过。哈哈,谢谢啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2558 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:57 · PVG 23:57 · LAX 08:57 · JFK 11:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.