AIが出したMarkdownの表が100行になって詰んだので、VS Code拡張機能を作ってみたI Got Stuck with a 100-Row Markdown Table Generated by AI, So I Built a VS Code Extension
匿名の公開いいねです。記事の保存・お気に入りではなく、Featured、Top 3、重要度、掲載順位には影響しません。仕組みとプライバシーAnonymous public likes are reactions, not saved articles or bookmarks. They do not affect Featured, Top 3, importance, or listing order.How it works and privacy
- Markdown Workbench Sは、長大なMarkdown表の絞り込みや先頭列を固定した横スクロールに対応する専用プレビューを提供します。
- Mermaid図もサイズと表示枠を別々に調整でき、設計書をExcelへ移さず確認したい開発者に役立ちます。
- Markdown Workbench S filters large Markdown tables and keeps the first column fixed while scrolling.
- Separate Mermaid sizing helps developers review designs without Excel.
本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (qiita.com) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (qiita.com).
要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.
専用プレビュー
Markdown Workbench Sは、長大なMarkdownの表やMermaid図を見やすく確認するためのVS Code拡張機能です。設計書のレビュー結果など、AIが表形式で出力した内容が数十行、数百行に及ぶ場合でも、専用プレビュー上で扱いやすくすることを重視しています。
起動するには、VS CodeのエクスプローラーまたはタブでMarkdownファイルを右クリックし、「Markdown Workbench S: Open Preview」を実行します。標準のMarkdownプレビューとは別に、表や図の確認に向けたプレビューが開きます。
表の絞り込み
専用プレビューに表示したMarkdownの表は、その内容を直接絞り込めます。行数の多い表から確認したい内容を探す際に、表をExcelへ持っていく作業を減らせる点が特徴です。
列数が多い設計書に向けて、先頭列を固定したまま横スクロールする機能も備えています。横方向に長い表でも、基準となる先頭列を表示した状態で各列を確認できます。このほかにも、表を見やすくするための複数の機能が実装されています。
Mermaid図
Mermaidで作成したフロー図などについては、図のサイズと表示枠を分離して操作できます。図が大きくなり、標準のMarkdownプレビューでは確認しづらい場合を想定した機能です。
大きな図だけを確認したいときは、ブラウザの別ウィンドウではなく、VS Codeのプレビューの隣にタブとして表示できます。Light、Dark、High Contrastなど、VS Codeで利用しているテーマも引き継ぎます。
目次と検索
サイドメニューからは目次や検索を利用できます。長い設計書の全体をたどったり、目的の場所を探したりする操作を、専用プレビュー内で進められるようにしています。
Markdown Workbench S
Markdown Workbench S is a VS Code extension created to make long Markdown tables easier to review. It addresses cases where AI-generated review results or design documents contain tables stretching across dozens or hundreds of rows, making the raw Markdown difficult to inspect.
Markdown is often used for design documents because its text-based format is easy to manage with Git and makes differences easy to see. However, reviewing large tables can become cumbersome, especially when the content would otherwise need to be moved into Excel for closer inspection.
Open Preview
The extension uses a dedicated Markdown preview. To launch it, right-click a Markdown file in the VS Code Explorer or in a tab, then run “Markdown Workbench S: Open Preview.”
Within this preview, users can filter the contents of a Markdown table directly. For design documents with many columns, the first column can remain fixed while the rest of the table is scrolled horizontally. This makes it easier to retain the context provided by the first column while checking information farther across the table.
The extension also implements additional functions intended to improve table readability. A central characteristic is reducing the need to transfer Markdown tables to Excel simply to review them.
Mermaid Sizing
Design documents can also include flow diagrams created with Mermaid. Large Mermaid diagrams may be difficult to check in the standard Markdown preview, so Markdown Workbench S allows the diagram size and its display frame to be controlled separately.
When a large diagram needs focused inspection, it can be displayed on its own. Rather than opening it in a separate browser window, the extension places it in a tab next to the VS Code preview.
Themes and Search
The preview inherits Light, Dark, and High Contrast themes. It also provides a side menu with functions including a table of contents and search.
These navigation tools are intended to make specific locations easier to find in long design documents, while keeping table and diagram review inside the VS Code preview workflow.
ポコとTECHガイドPoko & TECH Guide
ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.
- ポコPoko数十行、数百行のMarkdown表って、どうやって見やすくするの？How does this make Markdown tables with dozens or hundreds of rows easier to read?
- TECHガイドTECH Guideこの記事では、専用プレビューで表を絞り込み、先頭列を固定したまま横スクロールできるよ。The article shows a dedicated preview that filters tables and keeps the first column fixed while you scroll sideways.
- ポコPoko設計書を確認する開発者が、表をExcelへ移さずVS Codeで探しやすくなるってこと？So developers reviewing design docs can find what they need in VS Code without moving tables to Excel?
- TECHガイドTECH Guideそうだね。目次や検索も使えて、Mermaid図はサイズと表示枠を別々に調整できるんだ。Yes. It also offers a table of contents and search, while Mermaid diagram size and its viewing area can be adjusted separately.
- ポコPoko長い表も大きな図も、設計書のまま確認しやすくする拡張機能なんだね。Got it—it helps people review long tables and large diagrams without taking them out of the design document.
- TECHガイドTECH Guideただし、標準プレビューそのものではなく、右クリックから専用プレビューを開いて使う仕組みだよ。One note: it doesn’t change the standard preview itself. You open its dedicated preview from the right-click menu.
