ColaView MD
Rich Markdown preview & PDF/HTML export for VS Code — powered by ColaMD rendering engine (Milkdown-based WYSIWYG). Features
Quick Start
Commands & UsageCommand Palette (
|
| Command | Description |
|---|---|
ColaView MD: Show Preview |
Open or focus the preview panel |
ColaView MD: Export to PDF... |
Export current file as A4 PDF |
ColaView MD: Export to HTML... |
Export as standalone HTML |
ColaView MD: Switch Preview Theme... |
Choose from Light / Dark / Elegant / Newsprint |
ColaView MD: Import Custom Theme... |
Load a .css file as custom theme |
Right-click Context Menu (in Preview)
When the preview is open, right-click anywhere to access:
| Menu Item | Description |
|---|---|
| Export HTML | Export current preview as standalone HTML |
| Export PDF | Export current preview as A4 PDF |
| Theme ▸ | Submenu listing all built-in + custom themes (✓ marks active) |
| Import Theme... | Open file picker to import a .css file |
Themes
Built-in Themes
| Theme | Style | Best For |
|---|---|---|
| Light | Clean white, blue accents | General use, documentation |
| Dark | GitHub Dark palette | Night coding |
| Elegant | Warm serif, beige tones | Academic papers, long-form |
| Newsprint | Serif, print texture | Print preparation |
Custom Themes
Place .css files in the .themes/ directory at your workspace root:
my-project/
├── .themes/
│ ├── my-dark.css # appears as "My-dark" in theme menu
│ └── corporate.css # appears as "Corporate" in theme menu
└── README.md
Custom themes are automatically detected and appear alongside built-in themes in both the command palette and right-click context menu.
Switch via command palette or settings:
{ "colaview.theme": "dark" }
Import custom CSS: Ctrl+Shift+P → "ColaView MD: Import Custom Theme..." or via right-click menu → "Import Theme..."
Configuration
| Setting | Type | Default | Description |
|---|---|---|---|
colaview.theme |
string |
"light" |
Preview theme: light, dark, elegant, newsprint, or any custom theme name |
colaview.plugins.math |
boolean |
true |
Enable KaTeX math rendering |
colaview.plugins.mermaid |
boolean |
true |
Enable Mermaid diagram rendering |
colaview.pdfMethod |
string |
"puppeteer" |
PDF engine: puppeteer or webviewPrint |
colaview.autoPreview |
boolean |
false |
Auto-open preview for .md files |
colaview.customThemesPath |
string |
"" |
Directory for custom theme CSS files |
Supported Syntax
Standard Markdown — Headings, bold, italic, strikethrough, code blocks, links, images, lists, blockquotes
GFM Extensions — Tables, task lists, footnotes, autolinks
Math (KaTeX)
Inline: $E = mc^2$
Display:
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
Diagrams (Mermaid)
```mermaid
graph LR
A[Markdown] --> B[ColaView]
B --> C[PDF]
B --> D[HTML]
```
Supports: flowchart, sequence, class, state, ER, journey, pie, Gantt, gitGraph, mindmap, timeline, quadrant, XY, C4, Sankey, block, architecture
Architecture
┌─────────────┐ postMessage ┌──────────────────┐
│ Extension │ ◄──────────────────► │ WebView │
│ (Node.js) │ │ (Milkdown/ │
│ │ raw markdown ──► │ ColaMD editor) │
│ ThemeManager│ theme/css ──► │ │
│ Exporters │ ◄── rendered HTML │ Read-only WYSIWYG│
│ │ │ + Context Menu │
└─────────────┘ └──────────────────┘
Key design: The extension sends raw Markdown to the WebView, where Milkdown (via ColaMD) renders it as a read-only WYSIWYG editor. For exports, the WebView returns the rendered HTML back to the extension. The WebView also hosts a right-click context menu for quick access to export and theme functions.
Security Model
The WebView uses a strict Content-Security-Policy (CSP) with nonce-based script loading:
- Extension generates a random
noncevalue per panel creation - CSP allows only scripts matching that specific
nonce - All resource URIs are resolved through
webview.asWebviewUri()for sandbox isolation - This prevents XSS injection even if markdown content contains malicious scripts
Project Structure
src/
├── extension.ts # Entry point (activate/deactivate), error isolation
├── commands/commands.ts # Command registration (showPreview, exportHTML, exportPDF, etc.)
├── preview/
│ ├── preview-manager.ts # WebView lifecycle, nonce CSP, message handling, debounce sync
│ └── webview/
│ ├── index.html # WebView template + context menu styles
│ └── app.ts # Milkdown/ColaMD init + context menu logic
├── export/
│ ├── pdf-exporter.ts # Puppeteer PDF generation (A4, print background)
│ ├── html-exporter.ts # Standalone HTML export (embedded CSS)
│ └── css-collector.ts # CSS variable extraction for export documents
├── themes/
│ ├── theme-manager.ts # Theme loading, switching, .themes/ directory scanning, import
│ ├── foundation.css # Base CSS variables (colors, spacing)
│ └── built-in/ # light.css, dark.css, elegant.css, newsprint.css
├── config/configuration.ts # Settings defaults
└── utils/file-utils.ts # File I/O helpers
Development
git clone https://github.com/bytechain/vscode-colaview.git
cd vscode-colaview
npm install
# Build (esbuild bundles all deps into out/)
npm run compile
# Watch mode
npm run watch
# Package .vsix (~206KB, no node_modules needed)
npm run package
# Debug: press F5 in VS Code to launch Extension Development Host
Build System
The project uses esbuild for bundling — all dependencies (including @bytechain.cn/colamd, katex, mermaid, puppeteer) are inlined into out/extension.js. Resource files (CSS, WebView HTML/JS) are copied to out/ during build. The resulting VSIX is ~206KB with zero external dependencies.
Changelog
v0.1.2
- 🐛 Blockquote Background Fix — Fixed blockquote background color being overridden by page background in Dark, Light, and Newsprint themes; all 4 built-in themes now correctly display their configured
--blockquote-bgvalues
v0.1.1
- 🎨 Theme Consistency Fix — Unified
--code-colorand--code-block-textCSS variables across all 4 built-in themes (Light, Dark, Elegant, Newsprint), eliminating inconsistent inline code / code block text colors - 📰 Newsprint Theme Alignment — Fully aligned Newsprint theme variables with ColaMD-extend base.css, including font family (PT Serif serif stack), code color inheritance, and all semantic color tokens
- 🔧 Light Theme Completion — Added missing
--table-bordervariable to Light theme for consistent table styling - 📦 Dependency Migration — Switched from local ColaMD project reference to npm package
@bytechain.cn/colamd(^1.5.2)
v0.1.0
- Initial release with WYSIWYG preview, PDF/HTML export, 4 built-in themes, custom theme support