ChromaMark for VS Code

Live preview and syntax highlighting for ChromaMark — Markdown (CommonMark + GFM) plus colored blocks, colored pills, collapsible sections, fields, meters, and inline diff.

Features

• Live preview. Contributes the ChromaMark renderer to VS Code's built-in Markdown preview, so ::: blocks, [!pills], [=meters], ::: fields, and CriticMarkup render as you write. Open with Markdown: Open Preview (Ctrl+Shift+V / Cmd+Shift+V).
• Opens as preview. ChromaMark files (.cm) open directly as the rendered preview. To edit, use the editor's Reopen as Source action; a file is only auto-converted once per session, so switching to source is never undone.
• Outline sidebar. The preview shows a left-hand header tree — click to jump, with scroll-spy highlighting and a collapse toggle.
• Syntax highlighting. An injection grammar highlights ChromaMark constructs inside any Markdown document.
• .cm files. This extension is treated as Markdown, so it gets full editing and preview support.

Example

::: success Deploy succeeded
Region `eastus`, 3/3 replicas [!ok healthy].
:::

Build [!pass] · lint [!warn 12] · coverage [=success 87%]

::: details danger Integration failures (3)
See the trace attached to the run.
:::

How it works

The extension imports @chromamark/renderer and applies it to the preview's markdown-it instance via the extendMarkdownIt contribution point. Preview styling is supplied by media/chromamark.css, themed to follow the active editor color theme.

Development

From the repository root:

npm install
npm run build --workspace @chromamark/renderer   # build the renderer
npm run build --workspace chromamark-vscode       # bundle the extension

Then press F5 in VS Code to launch an Extension Development Host and open any .md / .cm file with the preview.

Build & install the VSIX

npm run package --workspace chromamark-vscode      # → chromamark-vscode-<version>.vsix
code --install-extension packages/vscode/*.vsix --force

The extension is bundled with esbuild (the renderer and markdown-it are inlined), so the VSIX is self-contained. After installing, open a .cm/.md file and run Markdown: Open Preview (Ctrl+Shift+V / Cmd+Shift+V).

License

Modified MIT License with a SaaS source-availability provision — see LICENSE.md.