Inkwell Markdown Preview
A VS Code extension that previews Markdown with full CSS theming control, dual preview modes (browser window or editor panel), bidirectional scroll sync, and PDF export.
Features
- Browser preview (default) — opens in your system browser, perfect for a second monitor
- Editor preview — side-by-side panel within VS Code
- Live reload — preview updates as you type
- Scroll sync — bidirectional, interpolated scrolling between editor and preview
- PDF export — styled PDF output via system Chrome
- Built-in themes — GitHub, Nord, Dracula, Solarized, and more
- Full theme control — customize every color, font, and spacing via settings
- Custom CSS — point to your own stylesheet for complete control
- Light/dark modes — auto-detects your VS Code theme, or set explicitly
Usage
Open any Markdown file and click the preview button in the top-right corner of the editor (or press Cmd+K V / Ctrl+K V).
Commands
| Command |
Description |
Inkwell: Open Preview |
Open preview using configured mode |
Inkwell: Open in Browser |
Open preview in system browser |
Inkwell: Open to Side |
Open preview in editor side panel |
Inkwell: Export as PDF |
Export current file as styled PDF |
Inkwell: Toggle Scroll Sync |
Enable/disable scroll sync |
Theme Customization
Built-in Themes
Set inkwell.builtinTheme to one of: github (default), nord, dracula, solarized, brand, paintify.
Fonts & Layout
{
"inkwell.fontFamily": "Inter, sans-serif",
"inkwell.fontMono": "JetBrains Mono, monospace",
"inkwell.fontSize": "15px",
"inkwell.lineHeight": "1.8",
"inkwell.contentWidth": "800px"
}
Colors
Override any color independently for light and dark themes:
{
"inkwell.lightTheme": {
"bg": "#fafafa",
"fg": "#333333",
"link": "#0055aa",
"codeBg": "#f0f0f0",
"headingBorder": "#dddddd"
},
"inkwell.darkTheme": {
"bg": "#1a1a2e",
"fg": "#e0e0e0",
"link": "#7cb3ff",
"codeBg": "#16213e"
}
}
Available color keys: bg, fg, fgMuted, link, border, codeBg, codeFg, blockquoteBorder, blockquoteFg, tableBorder, tableStripe, headingBorder, selection, highlight.
Custom CSS File
For full control, point to your own CSS file. It loads last, so it overrides everything:
{
"inkwell.customCssPath": "/path/to/my-theme.css"
}
The preview uses CSS variables throughout, so your custom CSS can override just the variables:
:root {
--bg: #fdf6e3;
--fg: #657b83;
--link: #268bd2;
--font-body: 'Literata', Georgia, serif;
}
Settings Reference
| Setting |
Default |
Description |
inkwell.previewMode |
"browser" |
"browser" or "editor" |
inkwell.serverPort |
3800 |
Local server port for browser mode |
inkwell.theme |
"auto" |
"auto", "light", or "dark" |
inkwell.builtinTheme |
"github" |
Built-in color theme preset |
inkwell.fontFamily |
"" |
Body font family |
inkwell.fontMono |
"" |
Monospace font for code |
inkwell.fontSize |
"" |
Base font size (default: 16px) |
inkwell.lineHeight |
"" |
Body line height (default: 1.6) |
inkwell.contentWidth |
"" |
Max content width (default: 900px) |
inkwell.lightTheme |
{} |
Light theme color overrides |
inkwell.darkTheme |
{} |
Dark theme color overrides |
inkwell.codeBlockTheme |
"auto" |
Code syntax theme: "auto", "light", "dark" |
inkwell.customCssPath |
"" |
Path to custom CSS file |
inkwell.scrollSync |
true |
Enable bidirectional scroll sync |
inkwell.chromePath |
"" |
Chrome path for PDF (auto-detected) |
inkwell.pdfFormat |
"A4" |
PDF paper format |
inkwell.pdfMargin |
{top:"1cm",...} |
PDF page margins |
PDF Export
Uses your system Chrome installation (auto-detected on macOS, Linux, and Windows). The exported PDF includes all your theme customizations. Set inkwell.chromePath if auto-detection doesn't find your Chrome.
Development
npm install
npm run build # production build
npm run watch # development with auto-rebuild
Press F5 in VS Code to launch the Extension Development Host for testing.
Tech Stack
- markdown-it — Markdown parsing
- shiki — Syntax highlighting with VS Code-accurate TextMate grammars
- ws — WebSocket server for browser mode live reload
- puppeteer-core — PDF export via system Chrome
- esbuild — Fast bundling
Support
If you find Inkwell useful, consider buying me a coffee.
License
MIT
