MD Reader - Professional Markdown Previewer for VS Code

Overview

MD Reader is a lightweight, professional Markdown previewer for VS Code with two modes:

• Preview (mdreader.preview): opens side-by-side (non-intrusive).
• Full Render (mdreader.fullRender): renders Markdown in-place (replaces the editor view).

Both deliver identical clean GitHub-styled rendering with syntax highlighting (via Highlight.js), local image support, dark theme, GFM, real-time debounced updates with scroll restoration, and no toolbar/header.

How it works: The extension uses the marked library (GFM-enabled) to convert .md content into HTML. A custom marked.Renderer highlights code with Highlight.js and rewrites relative image paths to webview-safe URIs (asWebviewUri). The HTML is shown in a VS Code Webview with GitHub-inspired CSS that adapts to light/dark/high-contrast themes.

Developed by Anand Shah.

Features

• Dual Modes: Lightweight side-by-side Preview + Full Render (opens in active editor column, replacing the Markdown source for focused viewing).
• Real-time Live Updates: Debounced (150ms) on edit/save; works independently for both panels. Scroll position is preserved across updates.
• Local & Remote Images: Relative paths (e.g. ./logo.png, images/shot.png) and workspace images load correctly via asWebviewUri. Remote HTTPS and data URIs also work.
• GFM: Tables, task lists, strikethrough, and autolinks via marked GFM mode.
• Syntax Highlighting: Highlight.js with GitHub light/dark themes; supports JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, SQL, Bash, JSON, YAML, XML, Markdown, CSS, SCSS, Dockerfile, PowerShell, Ruby, PHP, Swift, Kotlin, INI/TOML + aliases and auto-detection.
• Dark Theme: Follows VS Code light / dark / high-contrast themes for both body text and code highlighting.
• Clean Unified Styling: Both modes use identical GitHub-inspired markdown-body (centered max-width 980px, padding, tables, blockquotes, etc.). No header or toolbar.
• Editor Integration: Eye icon ($(eye)) for preview + book icon ($(book)) for full render in editor title bar; available in context menu and Command Palette.
• Secure & Lightweight: Strict CSP, nonce-protected scroll script only, retainContextWhenHidden: true, minimal dependencies.
• Focus Behavior: Preview preserves editor focus; full render takes the main view.
• Cross-compatible: VS Code ^1.80.0+.

Installation

Prerequisites

• Visual Studio Code (version 1.80.0 or higher)
• Node.js and npm (for development)

From VS Code Marketplace (Upcoming)

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Search for "MD Reader" by Anand Shah.
4. Click Install.

Manual Installation (Development)

1. Clone the repository:

   git clone https://github.com/AnandShah10/MDReader.git
   

2. Open the cloned folder in VS Code.
3. Install dependencies:

   npm install
   

4. Compile the extension:

   npm run compile
   

5. Press F5 to run the extension in a development instance of VS Code.

Packaging for Distribution

To create a VSIX package for manual installation or publishing:

npm install -g @vscode/vsce
vsce package

Usage

1. Open a .md file in VS Code.
2. Preview: Click the eye icon ($(eye)) in the editor title bar, use the context menu, or run MD Reader: Preview Active File (Command Palette, Ctrl+Shift+P). Opens side-by-side without stealing focus.
3. Full Render: Click the book icon ($(book)) or run MD Reader: Open Full Render. Replaces the editor with the rendered view (active column).
4. Both show clean, syntax-highlighted Markdown (identical styling, live updates on change/save).

Common Features:

• Real-time GitHub-styled rendering with Highlight.js for code blocks.
• See SAMPLE.md for test content (tables, lists, multi-language code, blockquotes, etc.).

Assign custom keybindings for mdreader.preview or mdreader.fullRender in VS Code Keyboard Shortcuts.

Screenshots

Editor Title Bar Icons (for both modes)

Lightweight Preview (side-by-side, clean)

Full Render (in-place editor replacement, clean)

Note: Both modes now render identically with clean GitHub-style Markdown (no header/toolbar/button, per latest updates). Screenshot 2 shows the side preview; Screenshot 3 shows full render in the main editor area. Test with SAMPLE.md (multi-language code blocks, tables, lists, etc.) to see HLJS syntax highlighting in action.

Changelog

See the full CHANGELOG.md for detailed version history (v0.0.7 removed header/toolbar for identical clean rendering in both modes, switched full render to in-place Active column, and cleaned up code/CSS; earlier versions added dual modes, HLJS, editor icons, and unified GitHub styling).

Contributing

Contributions are welcome (bug fixes, more languages, dark theme support, Mermaid diagrams, etc.)! See CHANGELOG.md and the code for current implementation. Fork the repo, create a feature branch, and submit a Pull Request or open an Issue.

Development: npm install, npm run compile, press F5 in VS Code to test both mdreader.preview (side panel) and mdreader.fullRender (in-place).

Support & Issues

If you encounter any issues or have suggestions, please report them on the Issues page.

Publisher Information

• Name: Anand Shah
• GitHub: @AnandShah10
• Email: shahanand1072004@gmail.com

License

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

Built with ❤️ for the VS Code community by Anand Shah.