LiveMD — Lightweight Markdown Preview for VS Code

LiveMD is a lightweight technical documentation reader built into Visual Studio Code. It provides a comfortable reading experience with live Markdown preview, beautifully rendered KaTeX equations, syntax-highlighted code blocks, one-click code copying, and reading progress tracking — all without leaving your editor.

Designed for developers, LiveMD makes reading long technical documents, API references, README files, and engineering notes easier and more enjoyable.

Features

Live Markdown Preview — Automatically updates the preview as you edit your Markdown document.
LaTeX Math Rendering — Renders inline $...$ and display $$...$$ equations using KaTeX.
Syntax Highlighting — Highlights code blocks using highlight.js.
One-Click Code Copying — Copy fenced code blocks using VS Code's native clipboard API.
Reading Progress — Displays a reading progress percentage and progress indicator at the top of the document.
Floating Reader Toolbar — A draggable and collapsible toolbar with convenient reading controls.
Table of Contents — Automatically generates a navigable table of contents.
Reading Customization — Adjust font size and reading width to suit your preferences.
Preview Themes — Switch between available preview color palettes.
Scroll Synchronization — Synchronizes the editor position with the preview and restores the previous preview position.
VS Code Theme Integration — Adapts to your editor's colors, typography, and dark/light theme.

Getting Started

Open a Markdown (.md) file in Visual Studio Code.
Select Open LiveMD Preview from the editor title toolbar or Command Palette.
Start editing your document. The preview updates automatically.

Math Examples

Inline Math

$E = mc^2$

Display Math

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Settings

LiveMD provides the following configuration options:

Setting	Default	Description
`liveMarkdown.syncScroll`	`true`	Synchronize scrolling between the editor and preview.
`liveMarkdown.allowRemoteImages`	`true`	Allow images from HTTPS URLs.
`liveMarkdown.updateDelay`	`120`	Preview update delay in milliseconds (0–2000).

Performance

LiveMD is designed to remain lightweight and responsive.

Initializes the Markdown renderer only when the preview is first opened.
Registers only 10 commonly used highlight.js languages.
Limits syntax highlighting for very large code blocks.
Avoids retaining unnecessary hidden webview state.
Debounces document updates to reduce unnecessary rendering.
Uses the VS Code host clipboard API for code copying.

Privacy & Security

LiveMD processes Markdown content locally within the VS Code extension webview.

Raw HTML is disabled.
Scripts are restricted through a nonce-based Content Security Policy (CSP).
Remote images can be disabled using liveMarkdown.allowRemoteImages.
Unsupported or privileged URI schemes are ignored.
Relative resources are restricted to the current workspace or document directory.

License

MIT License

LiveMD

letER functionRE