Markdown のテーブル、いわゆる gfm-table は広く普及していますが、
シンプルすぎて、使っていると徐々に不満が出てきます。
- 長文が書きづらい、改行ができない
- 列を増やす時に編集が大変
- 編集前後の diff が真っ赤になる
不満を解消するために既存の Markdown のテーブル拡張を探しましたが
納得のいくものは見つかりませんでした。
「でも今ならAIもあるし、自分で書けるんじゃないか？」
そう思い、年末から ChatGPT と一緒に、
前々から温めていた自前の Markdown テーブル拡張を書き始めました。
ようやく完成したので、ここに紹介します。
VS Code 機能拡張 「Pipe Table Preview for VS Code」
🧩 Pipe Table Preview for VS Code - Visual Studio Marketplace
VS Code にこの拡張をインストールしてください。
デフォルトの Markdown プレビューで pipe-table 記法 がそのままテーブルとして表示できます。
pipe-table 記法について
「pipe-table」という名前は、ChatGPT がいくつか考えてくれた名前から選びました。
一言でいうと、 縦に展開できる gfm-table です。
通常の gfm-table は、1行にすべてのセルを書くため、
セル内の文章が長くなると横に伸びてしまいます。
| 項目 | 詳細内容の説明 |
|-------------------|----------------|
| **データの所有権** | ユーザーが本サービス上にアップロードした一切のコンテンツに関する権利は、当該ユーザーに帰属します。ただし、サービスの保守・運用および不具合の解消を目的とする範囲において、当社は当該データを複製または解析する最小限の権限を有することに同意するものとします。 |
| **禁止事項の詳細** | 短期間での大量アクセス、リバースエンジニアリング、および他者のアカウント情報を不正に利用する行為は厳格に禁止されています。また、公序良俗に反するデータの保存が確認された場合、事前の通知なく当該データを削除し、アカウントの利用を無期限に停止する厳しい措置を講じることがあります。 |
| **サポート範囲** | 標準プランにおけるサポートは、平日10時から18時までのメール対応のみとなります。障害発生時の復旧作業には最善を尽くしますが、SLA（サービス品質保証）に基づく返金規定はエンタープライズプランをご契約のお客様のみが対象となりますので、あらかじめご了承ください。 |
pipe-table では、gfm-table と同じように横に書くこともできますが、
物理行の2行目以降をインデント することで
以下のように 縦方向に書くことができます 。
| 項目
| 詳細内容の説明
|-
| **データの所有権**
| ユーザーが本サービス上にアップロードした一切の
コンテンツに関する権利は、当該ユーザーに帰属します。
ただし、サービスの保守・運用および不具合の解消を
目的とする範囲において、当社は当該データを複製または
解析する最小限の権限を有することに同意するものとします。
| **禁止事項の詳細**
| 短期間での大量アクセス、リバースエンジニアリング、
および他者のアカウント情報を不正に利用する行為は
厳格に禁止されています。
また、公序良俗に反するデータの保存が確認された場合、
事前の通知なく当該データを削除し、アカウントの利用を
無期限に停止する厳しい措置を講じることがあります。
| **サポート範囲**
| 標準プランにおけるサポートは、
平日10時から18時までのメール対応のみとなります。
障害発生時の復旧作業には最善を尽くしますが、
SLA（サービス品質保証）に基づく返金規定は
エンタープライズプランをご契約のお客様のみが
対象となりますので、あらかじめご了承ください。
Markdown のままでもかなり自然で読みやすくなるのがわかると思います。
この「縦に書くテーブル」というのは新しいものではなく、
昔の Confluence Wiki の Textile 記法でも縦に書くことができました。
たしかこんな感じです。
| 1行目セル1
| 1行目セル2
| 1行目セル3 |
| 2行目セル1
| 2行目セル2
| 2行目セル3 |
行末の | で表の行を閉じる、という仕様だったと思います。
ただこれだと、表の1行がどこからどこまでか、若干わかりづらく感じます。
pipe-table だと、物理行の2行目以降をインデントするので、こうなります。
| 1行目セル1
| 1行目セル2
| 1行目セル3
| 2行目セル1
| 2行目セル2
| 2行目セル3
インデントを導入したのは、
gfm-table に縦展開を持ち込むための狗肉の策だったのですが、
逆に表の1行がどこまでか理解しやすくなったと思います。
プレビューだけじゃ足りない人向け：npm パッケージの紹介
「VS Code のプレビューだけ対応しても意味がない」
と思う方もいると思います。
なので Markdown パーサ向けの拡張も npm で公開しました。
markdown-it 用とremark 用を用意しました。
📦 markdown-it-pipe-table - npm
- markdown-it 用の pipe-table 拡張
- gfm と併用しつつ、pipe-table を優先して解釈できます。
- 上記 vscode 拡張で使用しているものです。
📦 remark-pipe-table - npm
- unified / remark 向けの拡張
- 同じ pipe-table 構文をサポートします。
- 自分用のWebサイトを Astro で作る想定で作成したものです。
まだどちらも v0.1.0 ですし、個人が作ったものなのでバグがあるかもしれませんが、
どちらも自分で使う想定なので、メンテナンスは継続するつもりです。
追記: Astroで pipe-table を使用するサンプルを用意しました。
Astro と remark プラグインを併用するサンプルを、以下Github に置きました。
使用する際の参考にしてください。
このパッケージを書くのに AI を使いました
今回の実装では、ChatGPT をかなりの部分で使っています。
人間が考えた部分
- pipe-table という構文そのもの
- gfm-table との関係
- どういう書き味にしたいか
- どのライブラリ（micromark / mdast / markdown-it / remark）を使うか
このあたりの 設計と方針 は自分で考えました。
ChatGPT に書いてもらった部分
- プログラム本体のかなりの部分
- テストコード
- README やドキュメント
- VS Code 拡張の雛形
正直、 ChatGPT がなければ完成しなかったと思います。
仕様を文章で説明し、
「このテストを通したい」「このケースは壊したくない」
と対話しながら進めることで、
かなり複雑な Markdown 拡張でも最後まで作り切れました。
おまけ：定義リスト用の拡張もあります
定義リスト（dl,dt,dd）用の拡張も作りました。
- 🧩 DL List Preview (colon-based) - Visual Studio Marketplace
- 📦 markdown-it-dl-list - npm
- 📦 remark-dl-list - npm
こちらの構文はこんな感じです。
: 用語1
: 説明文1
: 用語2
: 説明文2
定義リストは既存の Markdown 拡張が多くあるので需要はないかも知れませんが
Pandoc 風の定義リストの書式を見て、なんかもやっとした気持ちになるので作りました。
よかったら使ってみてください。
おわりに
pipe-table は、
「Markdown のテーブルは便利だけど、文章を書くにはつらい」
という個人的な不満から生まれました。
私と同じように、長い文章や表を扱う必要がある人には、
有用な Markdown 拡張になると思います。
ぜひ触ってみてもらえるとうれしいです。