Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Markdown Rich Preview & ExportNew to Visual Studio Code? Get it now.
Markdown Rich Preview & Export

Markdown Rich Preview & Export

Nur Srijan

|
102 installs
| (0) | Free
GitHub-style Markdown previews with seamless PDF and HTML export
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Markdown Rich Preview & Export 🚀

A powerful VS Code extension that brings GitHub-style Markdown previews and one-click PDF/HTML exports right into your editor—no more Pandoc hacks or context-switching.

✨ Features

  • Rich Markdown Preview - Instant, side-by-side preview with GitHub-like styling

Enhanced Preview Demo

  • Export to PDF - Create professional PDF documents with proper formatting

Export to PDF Demo

  • Export to HTML - Generate standalone HTML files with all styles included

Export to HTML Demo

  • Real-time Updates - See changes instantly as you type
  • Syntax Highlighting - Beautiful code blocks with syntax highlighting
  • Math Support - Support for KaTeX math rendering
  • Responsive Design - Looks great on any device or screen size

🚀 Quick Start

  1. Install the extension from the VS Code Marketplace
  2. Open any Markdown (.md) file
  3. Right-click in the editor and choose one of these options:
    • "Markdown: Open Enhanced Preview" - For live preview
    • "Markdown: Export to HTML" - To save as HTML
    • "Markdown: Export to PDF" - To create a PDF document

🎯 Why Choose This Extension?

✅ All-in-One Solution - Preview and export without leaving VS Code
✅ No Pandoc Hacks - No need to switch to another tool or use Pandoc for export
✅ Beautiful Output - Professional, clean formatting for all your documents
✅ Keyboard Shortcuts - Quick access to all features
✅ Lightweight - Fast performance with minimal resource usage
✅ Open Source - Free to use and contribute to

🛠️ For Developers

Prerequisites

  • Node.js
  • VS Code
  • npm

Building from Source

# Clone the repository
git clone [https://github.com/nur-srijan/markdown-preview-export.git](https://github.com/nur-srijan/markdown-preview-export.git)
cd markdown-preview-export

# Install dependencies
npm install

# Build the extension
npm run compile

# Package the extension (creates .vsix file)
npx vsce package

# Install the extension
code --install-extension markdown-rich-preview-*.vsix

Testing

  1. Press F5 to open a new VS Code window with the extension loaded
  2. Open a Markdown file
  3. Use the right-click context menu to test all features

📝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Marked - For Markdown parsing
  • Highlight.js - For syntax highlighting
  • Puppeteer - For PDF generation

Made with ❤️ by Nur Srijan | GitHub | Twitter

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft