Markdown の 表(Table,テーブル) を書く拡張機能を作った

Markdown の表を書くときに、セルの結合や表のセルの構成とセルの内容を分けて記述できる Visual Studio Code拡張機能を作りました。 紹介する拡張機能MarkdownCat で検索してインストールして下さい。

基本ルール

  1. 言語名を mdcat.table にしてコードブロック*1を書きます。
  2. Markdown記法で表を書きます。セルは空白でOKです。
  3. セルの内容を記述します。 # 行-列 でセルの位置を指定します。(0 から始まる点に注意)
 ```mdcat.table
 |     |     |
 |:---:|:---:|
 |     |     |

 # 0-0
 Header 1

 # 0-1
 Header 2

 # 1-0
 Cell 1

 # 1-1
 Cell 2
 ```

ここまでの内容を Vscode のプレビューで見ると下図*2のようになっていると思います。

f:id:poyonshot:20210108235043p:plain

Markdown記法の併用

もちろん今まで通りセルの内容を表内に記述することができます。 説明が長くなったセルだけ表の外側の記述に変更できる*3のです。

 ```mdcat.table
 |動物     |鳴き声|
 |:--------|:----|
 |イヌ     |     |
 |ネコ     |     |
 |ニワトリ |     |

 # 1-1
 ワンワン

 # 2-1
 ニャー

 # 3-1
 コケコッコー
 ```

f:id:poyonshot:20210109000540p:plain

セルの内容を表の外側で記述できるということで、Markdown 記法では記述できなかった表の入れ子ができます。

 ```mdcat.table
 | A   | B   |
 |:---:|:---:|
 |     |     |

 # 1-0
 * a
 * b
 * c

 # 1-1
 |1    |2    |
 |:---:|:---:|
 |3    |4    |
 ```

f:id:poyonshot:20210109001007p:plain

セルの結合

  • セルに > < ^ を記述するとその方向のセルと結合します。
  • テキストアライメントは結合先の列の値を採用します。
  • 結合したセルの左上の 行-列 を指定して、セルの位置を指定します。
 ```mdcat.table
 |left  |center|right |
 |:-----|:----:|-----:|
 |>     |>     |      |
 |      |<     |<     |
 |      |<     |      |
 |^     |^     |      |

 # 1-0
 Cell A

 # 2-0
 Cell B

 # 3-0
 Cell C

 # 3-2
 Cell D

 # 4-2
 Cell E
 ```

f:id:poyonshot:20210109001633p:plain

ラベルを付ける

セルの内容は、ラベルとして利用できます。 大きい表やセルの結合を行って 行-列 でセルを指定するのが煩わしくなったときに使いましょう。

 ```mdcat.table
 |left  |center|right |
 |:-----|:----:|-----:|
 |      |>     |      |
 |>     |hello |<     |
 |      |<     |      |

 # hello 
 Hello World!
 ```

f:id:poyonshot:20210109093133p:plain

最後に

mdcat.table で書いた表は、MarkdownCat のマークダウンファイルを結合する機能で html の table タグに変換できます。 印刷や pdf 変換するときは、変換したマークダウンファイル*4を使って下さい。

poyonshot.hatenablog.com

*1:コードブロックを使うことで、既存のMarkdown記法に影響を与えずに独自の記述ルールを追加できた

*2:セルの行-列の数字を変更するとプレビュー表示のセルの内容が移動するのが楽しい

*3:これがやりたかった!

*4:mdcat.table で書いた表は、VscodePreview を使わないとコードブロックの内容を表示するだけです。