Grid Table Preview
Renders Pandoc-style grid tables in the built-in VS Code Markdown preview.
Grid tables are the +----+----+ ASCII-border table format. They can
express merged cells, rowspan, and multi-line cell content -- things
GitHub-flavoured pipe tables can't do -- which makes them common in
specification documents. VS Code's built-in preview doesn't understand
them, so they show up as raw ASCII art.
This extension detects them, sends them to a conversion service, and
inlines the returned HTML in the preview.
Features
- Renders grid tables inline in the standard Markdown preview -- no separate
preview window, no change to your documents.
- Merged cells and rowspan, expressed via mixed separator lines.
- Markdown inside cells: links, bold/italic, inline code, blockquotes,
and lists, including cells that mix raw Markdown with pre-rendered HTML.
- Literal angle-bracket text (
<Change ID>, <yyyy-mm-dd>) survives
instead of being parsed away as unknown HTML tags.
- Results are cached by table content and requests are debounced, so
editing a table doesn't hammer the conversion service.
Requirements
This extension does not ship with a conversion service.
You need access to one, and you must set its URL in
gridtablePreview.webhookUrl. Until that setting has a value, grid
tables render as a notice telling you to configure it.
The service contract is deliberately minimal:
|
|
| Method |
POST |
Request Content-Type |
text/markdown |
| Request body |
the raw grid-table text, borders and all |
| Response body |
the corresponding HTML |
Cell content may come back either as raw Markdown text marked with the
markdown="1" / markdown="block" attribute convention (as used by PHP
Markdown Extra, kramdown, and Python-Markdown's md_in_html), or already
rendered to HTML. Both are handled; see the
development notes if you're
writing a service.
Quick start
- Install the extension.
- Set
gridtablePreview.webhookUrl to your conversion service URL
(Settings -> search "Grid Table Preview", or edit settings.json).
- Open a Markdown file containing a grid table and open the preview
(
Cmd+Shift+V / Ctrl+Shift+V).
You'll briefly see a "Rendering grid table..." placeholder, then the
rendered table. sample.md in the repository has fixtures covering each
supported structure.
Configuration
Available under Settings > Extensions > Grid Table Preview, or directly in
settings.json:
{
// REQUIRED. URL of the grid-table-to-HTML conversion service. There is no
// default -- until this is set, grid tables render as a notice telling you
// to configure it. Changing it clears the render cache, so tables are
// re-fetched from the new service straight away.
"gridtablePreview.webhookUrl": "https://example.org/convert-markdown",
// How long to wait after you stop editing a table before sending it for
// rendering. Lower it for faster feedback at the cost of more requests;
// raise it if 2.5s still feels too eager.
"gridtablePreview.debounceMs": 2500
}
Known limitations
- Refresh timing varies by VS Code version. On some versions a
finished render appears on the next natural preview update (the next
keystroke or save) rather than the instant the service responds.
- Blank lines inside a cell. The content-line check requires a line to
start and end with
|. A truly bare blank line (no | at all) used as a
paragraph break inside a multi-line cell would be treated as the end of
the table. Cells that merely look blank are fine, as long as they are
still |-framed.
- In-memory cache only. The render cache is cleared on every VS Code
reload/restart, so tables are re-fetched once per session rather than
persisted across restarts.
Links
