Utsho Markdown Viewer

Features

✅ Live Preview — See your Markdown rendered in real-time as you type
✅ LaTeX Math — Full KaTeX support for equations ($inline$ and $$block$$)
✅ Syntax Highlighting — Beautiful code blocks with highlight.js
✅ Floating Toolbar — Quick formatting with bold, highlight, and delete tools
✅ PDF Export — Export to PDF using Chrome Puppeteer
✅ Scroll Sync — Bi-directional scroll sync between editor and preview
✅ Undo/Redo — Full undo/redo support from the preview panel (Cmd+Z / Cmd+Shift+Z)
✅ Relative Images — Images with relative paths display correctly
✅ GitHub Alerts — Support for [!NOTE], [!WARNING], [!TIP] etc.
✅ Red Highlight — Custom ::text:: syntax for red highlights

Installation

From Source

git clone https://github.com/MuntasirMalek/Test.git
cd utsho-markdown-viewer
npm install
npm run compile

Then press F5 to run in development mode.

Usage

Preview Markdown

1. Open a .md file
2. Press Cmd+Shift+V (Mac) or Ctrl+Shift+V (Windows/Linux)
3. Or right-click → "Markdown Viewer: Open Preview"

Export to PDF

1. Open a .md file
2. Press Cmd+Shift+E (Mac) or Ctrl+Shift+E (Windows/Linux)
3. Choose a save location

Note: PDF export requires Chrome, Chromium, or Microsoft Edge installed.

Floating Toolbar

1. Select text in the preview panel
2. A toolbar appears with formatting options:
   • B — Toggle bold (**text**)
   • 🟡 — Yellow highlight (==text==)
   • 🔴 — Red highlight
   • 🗑️ — Delete selected text

Keyboard Shortcuts

Supported Syntax

• Headers, bold, italic, strikethrough
• Lists (ordered & unordered)
• Code blocks with syntax highlighting
• LaTeX math: $inline$ and $$block$$
• Tables, blockquotes, links, images
• Yellow highlight with ==text==
• Red highlight with ::text::
• GitHub alerts: [!NOTE], [!TIP], [!WARNING], [!CAUTION]

Math Examples

Inline: $E = mc^2$ renders as $E = mc^2$

Block:

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Configuration

Requirements

• VS Code 1.85.0 or higher
• Chrome, Chromium, or Microsoft Edge (for PDF export)

Contributing

Contributions are welcome! See CONTRIBUTING.md for details.

License

MIT License - see LICENSE file for details.

Credits

• KaTeX for math rendering
• highlight.js for syntax highlighting
• marked.js for markdown parsing
• Puppeteer for PDF generation
• Inspired by markdown-viewer and markdown-preview-enhanced

Support

If you encounter any issues, please open an issue with:

• Description of the problem
• Steps to reproduce
• Your VS Code version and OS

Made with ❤️ by Utsho