Fluent Markdown Preview

A cleaner Markdown preview for VS Code. Segoe UI typography, a comfortable reading column, tables you can actually scan, and callouts that stand out — the look of a polished document rather than browser defaults.

Open it beside your editor and it scrolls along as you type. When the document is ready, copy it as HTML straight into SharePoint, Confluence or an email, or export a self-contained .html file that looks the same outside VS Code.

What you get

• A page that reads like a document — Fluent typography and spacing instead of browser defaults
• Tables worth reading — full-width, shaded header row, row highlight on hover
• Callouts — > [!NOTE], > [!WARNING] and friends, plus ::: note | tip | warning | danger blocks with an optional title
• Footnotes ([^1]) and inline attributes ({.class #id})
• Copy Rendered HTML — paste into SharePoint, Outlook, or a CMS
• Export as Standalone HTML — one file, styling included, light/dark aware
• Clean printing — the browser's "Print to PDF" produces a tidy document

Colours follow your VS Code theme rather than being hardcoded, so the preview looks right in light, dark and high-contrast.

Getting started

1. Open a Markdown file.
2. Press Ctrl+K then V, or use the preview button in the editor title bar.
3. Type. The preview follows your cursor; double-click the preview to jump back to the source.

Commands

Settings

Plugin settings are read when the preview builds its markdown-it instance, so close and reopen the preview after changing them.

How it works

This extension does not create its own webview. It contributes into the built-in Markdown preview through two contribution points:

"contributes": {
  "markdown.previewStyles": ["./media/fluent.css"],
  "markdown.markdownItPlugins": true
}

That means scroll sync, incremental re-render, image path rewriting, the content security policy, link handling, the outline, find-in-preview, mermaid and KaTeX all keep working, because they are still VS Code's implementation. The extension only supplies a stylesheet and a few extra markdown-it plugins.

A custom WebviewPanel would mean reimplementing every one of those, and reassigning panel.webview.html on each keystroke reloads the whole document — which resets the scroll position while you type.

Anchors and task lists are deliberately left to VS Code: re-adding them fights the built-in slugifier and breaks the table of contents.

Notes

• Copy and export render through VS Code's own markdown.api.render, so the output matches the preview. If that command is unavailable, a bundled markdown-it instance is used instead — identical apart from mermaid and syntax highlighting.
• Exported HTML keeps VS Code's syntax-highlighting markup, but the token colours come from the theme, so code blocks appear unstyled in a browser.
• Markdown Preview Enhanced replaces the built-in preview with its own webview, which does not read markdown.previewStyles. If both are installed, use Markdown: Open Preview to the Side to get this styling.