Pipe Table Preview for VS Code

Preview support for pipe-table, a flexible pipe-based table syntax for Markdown.

This extension enhances VS Code’s built-in Markdown preview so that tables written with the pipe-table syntax are rendered correctly, including multi-line cells and block-level content inside table cells.

Features

• Render pipe-table syntax in VS Code Markdown preview
• Supports:
  • Largely compatible with GFM tables (pipe-based syntax, delimiter rows, column alignment, etc.)
  • Multi-line table cells
  • Vertical cell layout
  • Block-level content inside cells (lists, code blocks, blockquotes, etc.)
  • Multiple <tbody> sections
• Disables VS Code’s default GFM table rule to avoid conflicts

Syntax

Simple table

| a | b
|-
| c | d

Column alignment

| left | center | right
|:-----|:------:|------:
| a    | b      | c

• |:- → left
• |:-: → center
• |-: → right

Alignment is emitted as CSS classes on <td> elements.

Multi-line cells

| item
  description line 1
  description line 2
|-
| next

Vertical cell layout

Cells can be written vertically by indenting lines that start with |:

| a
    | b
    | c
|-
| d
    | e
    | f

This produces a single row with multiple cells.

Block-level content inside cells

If a cell’s content is consistently indented, it will be parsed as block content:

| list
  - apple
  - banana
|-
| text

Multiple <tbody> sections

Each delimiter row (|-) starts a new <tbody>:

| h1 | h2
|-
| a  | b
|-
| c  | d

For a complete, implementation-agnostic description of the syntax, see: Pipe Table Syntax (unified / remark)

Note: This document describes the syntax only.

Usage

1. Install this extension
2. Open a Markdown file (.md)
3. Open Markdown Preview (Ctrl+Shift+V / Cmd+Shift+V)
4. Write tables using the pipe-table syntax

No additional configuration is required.

Configuration

pipeTablePreview.nowrapMaxByteLength

Controls when table header (th) and cell (td) contents are rendered without wrapping in the Markdown preview.

• Default: 16
• Maximum: 200

The value is compared against a pseudo byte length of the longest token in the cell text, where tokens are separated by whitespace.

Character weighting:

• ASCII characters count as 1
• Non-ASCII characters (Japanese, CJK, etc.) count as 2

If the calculated length of the longest token is within the specified limit, the cell is rendered with special wrapping behavior (preventing mid-word breaks while still allowing wrapping at spaces).

This helps keep short header columns readable while allowing longer labels to wrap naturally.

How it Works

This extension:

1. Hooks into VS Code’s Markdown preview pipeline
2. Disables the built-in GFM table rule
3. Registers the markdown-it-pipe-table plugin internally
4. Injects preview CSS to render tables consistently across themes

Known Limitations

• Pipe-table syntax is only supported in VS Code Markdown Preview
  • It does not affect Markdown export or other editors
• Some third-party Markdown preview extensions may override table rendering order

Related Projects

• markdown-it-pipe-table The underlying markdown-it plugin that implements the pipe-table syntax.
• remark-pipe-table A remark plugin that adds the same pipe-table syntax to unified / remark pipelines.

Why Another Table Syntax?

GitHub Flavored Markdown (GFM) tables are intentionally simple, but that simplicity makes them unsuitable for:

• multi-line cell content
• lists or code blocks inside cells
• complex layouts

Pipe-table is designed for authoring-rich Markdown documents while keeping a readable plain-text format.

License

MIT