Advanced Markdown Live Preview

Advanced Markdown Live Preview is a VS Code extension for Markdown files with live side-by-side preview, theme inversion, and in-preview editing.

Features

• Side-by-side Markdown preview
• Auto-open preview for Markdown files
• Live updates while typing
• Inverted theme behavior
  • dark editor -> light preview
  • light editor -> dark preview
• Edit mode inside the preview
• Toolbar actions for bold, italic, lists, alignment, and headings
• Save back to the Markdown file from preview
• Code syntax highlighting with highlight.js
• Math rendering with MathJax
• Scroll sync from editor to preview
• Editor title button and keyboard shortcut support

Usage

1. Open a Markdown file.
2. Press Ctrl+Shift+T on Windows/Linux or Cmd+Shift+T on Mac.
3. You can also click Open Preview to the Side from the editor title bar.
4. The preview opens beside the editor and updates automatically.
5. Click Edit Mode in the preview toolbar if you want to edit formatted content directly.
6. Use Save or Ctrl+S inside edit mode to write changes back to the Markdown file.

Command

• markdown-preview.openPreview -> Open Preview to the Side

Development

npm install
npm run compile

Optional watch mode:

npm run watch

Debug in VS Code:

1. Press F5
2. Select Run Extension for one-time build
3. Select Run Extension (Watch) for auto rebuild while developing

Package the extension:

npx @vscode/vsce package

Publish

This project is published through the VS Code Marketplace web dashboard.

1. Update the version in package.json
2. Run npm run compile
3. Run npx @vscode/vsce package
4. Upload the generated .vsix file in the Marketplace manage page

Detailed steps are in PUBLISHING.md.

Install

After publishing, users can install it from the Extensions view by searching for Advanced Markdown Live Preview.

Local VSIX install:

code --install-extension advanced-markdown-preview-1.1.0.vsix

Marketplace install command:

code --install-extension ahmadushay.advanced-markdown-preview

License

MIT. See LICENSE.