slidev-addon-tableau

A Slidev addon that renders ts-tableau tables from fenced code blocks. Write the table data and its layout as plain text; get a styled HTML table on the slide.

Install

npm install slidev-addon-tableau

Then enable it in your deck's headmatter:

---
addons:
  - tableau
---

Use

```tableau
 Name  | *Role*  | Notes
 Ant   | worker  | carries twice its weight
 Bee   | flyer   | makes **honey**
===
hlines
[r1] bg(shade1)
```

The block is rendered at build time to a plain <table class="tableau">, so nothing extra ships to the browser. The data section, the === separator and the layout language are exactly as documented in the tableau guide.

Cell contents are Markdown. Single-line cells are rendered inline (emphasis, code, links); multi-line cells written with col N {{ ... }} blocks are rendered as block Markdown (paragraphs, lists).

A trailing {...} on the info line is bound to the wrapper <div>, so you can size or position the table with UnoCSS classes:

```tableau {class: 'text-sm mx-auto w-3/4'}
...
```

Bad markup does not break the build: the block is replaced with a red error box showing the message.

Styling

The addon loads ts-tableau/tableau.css, plus a small stylesheet that maps its light and dark palettes onto Slidev's html.light / html.dark classes (the upstream stylesheet uses prefers-color-scheme, which Slidev does not). The palette is driven by CSS custom properties (--tb-header-bg, --tb-shade1-bg, ...) that you can override in your own style.css, scoped to .slidev-tableau.

Limitations

• Cell Markdown is rendered by a plain markdown-it instance, so Slidev-specific syntax (v-click, components, Shiki highlighting) does not work inside cells.
• PDF export renders the same HTML, so tables export fine.

Development

npm install
npm run dev        # preview example.md
npm test           # transformer tests
npm run typecheck
npm run gen:css    # regenerate styles/slidev.css after bumping ts-tableau

The addon is setup/transformers.ts (a Slidev codeblock transformer) plus styles/. Slidev compiles the TypeScript itself; there is no build step.

Related projects

• ts-tableau is the library that does the parsing and rendering; this addon is only the Slidev glue. Its guide and reference document the table and layout syntax.
• remark-tableau does the same job for unified/remark pipelines.
• Slidev and its addon guide.

License

MIT