SoliMark Preview
A richer markdown preview for VS Code — opens the markdown file you're editing in a side panel rendered through a custom pipeline that fixes the two things people complain about most in the built-in preview: ugly mermaid diagrams and no way to control typography.
What it does
VS Code's built-in markdown preview is functional but limited. SoliMark replaces it with a React-based renderer that gives you:
Beautiful diagrams, not just mermaid SVG
The killer feature. SoliMark inspects every ```mermaid block and routes it to one of two backends:
| Diagram type |
Renderer |
What you get |
flowchart / graph LR\|RL\|TD\|BT\|TB |
React Flow + dagre |
Interactive nodes, pan/zoom, auto-layout, icons inferred from labels (database, server, queue, user, …) |
stateDiagram |
React Flow + dagre |
Same — clean state machines instead of mermaid's defaults |
C4Container / C4Component |
React Flow + dagre |
First-class C4 model rendering with grouped containers |
sequenceDiagram and everything else |
mermaid library |
Standard mermaid SVG, themed to match your preview |
The React Flow diagrams have a toolbar: toggle edge labels, re-run auto-layout, and expand the diagram to fill the panel. Flowchart/state/C4 are re-parsed from the mermaid source — they don't use the mermaid library to render — so they look the way you'd actually want them to.
Real markdown features
- GitHub Flavored Markdown via
remark-gfm (tables, task lists, strikethrough, autolinks)
- Inline HTML via
rehype-raw
- Syntax-highlighted code blocks
- Frontmatter strip: a
---\nkey: value\n--- block at the top is parsed into a metadata header instead of being rendered as text
- Sidebar table of contents auto-generated from headings, with click-to-scroll
Typography you actually control
Three font slots, all bundled as variable woff2 so the extension works offline:
- Body: DM Sans (override via
solimark.fontFamily)
- Display / headings: Syne (override via
solimark.displayFontFamily)
- Code / mono: JetBrains Mono (override via
solimark.monoFontFamily)
Plus base font size (solimark.fontSize, 10–32 px) and session-local A−/A+ buttons in the panel header.
Theming
Usage
Right-click any .md file — in the editor tab or in the Explorer — and pick SoliMark: Open Preview to the Side.
- One panel per file. Re-running the command on the same file reveals the existing panel instead of opening a duplicate.
- Edits in the editor stream into the preview live (debounced ~150 ms).
- Closing the source editor does not close the preview.
- There is intentionally no "follow the active editor" behavior — each preview stays pinned to its file.
Settings
| Setting |
Default |
Description |
solimark.theme |
"auto" |
auto follows VS Code's color theme. |
solimark.fontFamily |
"DM Sans" |
Body font. Leave empty to inherit VS Code's font. |
solimark.monoFontFamily |
"JetBrains Mono" |
Code / mono font. |
solimark.displayFontFamily |
"Syne" |
Heading / display font. |
solimark.fontSize |
16 |
Base font size in px (10–32). |
solimark.tokens |
{} |
Map of --sm-… CSS variable overrides. |
When to use this vs. the built-in preview
Reach for SoliMark when:
- Your markdown has flowcharts, state diagrams, or C4 diagrams and the built-in mermaid output looks rough
- You're writing architecture docs, RFCs, or design notes that need to look presentable
- You want consistent typography across documents
Stick with the built-in preview when:
- You just need a quick scratch render and don't care how it looks
- You rely on VS Code's preview-specific features (scroll sync, edit-on-double-click)
Build from source
npm install
npm run build # esbuild → dist/extension.js, vite → dist/webview/
npm run package # vsce package → .vsix
F5 in VS Code launches an Extension Development Host with the extension loaded.
License
MIT
