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:

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

1. Install the extension.
2. Set gridtablePreview.webhookUrl to your conversion service URL (Settings -> search "Grid Table Preview", or edit settings.json).
3. 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

• Changelog
• Development notes -- architecture, how the parsing works, and how to build from source
• Issues
• Licence (BSD-3-Clause)