Markdown & HTML Live Preview
A VS Code extension that provides live preview of Markdown and HTML files in your browser with auto-reload functionality.
Support Us
Support Techopolis - Help us continue developing accessible technology solutions.
Join BITS - Become a member of BITS for $20/year.
Background
This extension was created by Techopolis Online Solutions in partnership with the Blind Information Technology Specialists (BITS) program to support the education of over 200 blind individuals learning markdown, HTML, and WordPress. While other preview extensions existed, they weren't fully accessible. This extension was developed specifically to solve this important accessibility challenge.
The Blind Information Technology Specialists (BITS) is a not-for-profit organization that:
- Fosters career development of blind computer professionals
- Promotes computer technology use by blind persons to improve their personal and professional lives
- Advocates for improved information access for all visually impaired people
Features
- Live preview of Markdown and HTML files in browser
- Auto-reload on save
- Smart HTML handling (preserves existing HTML structure)
- Configurable port settings
- GitHub-style markdown rendering
- Full context menu integration
- Editor title menu integration
- Fully accessible interface
Commands
MP: Open Preview - Opens the markdown or HTML preview in your browserMP: Set Default Port - Configure the preview server port
You can access both commands from multiple locations:
- Command palette
- Right-click on a markdown/HTML file in the explorer
- Right-click in the markdown/HTML editor
- Editor title menu (top-right of the editor)
- Editor title context menu
Settings
mp.server.port: Port number for the preview server (default: 20000)mp.server.autoOpen: Automatically open preview in browser (default: true)
Usage
- Open a Markdown (.md) or HTML (.html, .htm) file
- Access commands from any of these locations:
- Command palette (
Ctrl+Shift+P or Cmd+Shift+P)
- Right-click menu in file explorer
- Right-click menu in editor
- Editor title bar icons
- Editor title context menu
- Use "Open Preview" to start the preview
- Use "Set Default Port" to configure the port number
- Edit your file and save - the preview will update automatically
HTML Support
The extension provides smart HTML handling:
- For complete HTML files: preserves the existing structure and only injects live reload
- For partial HTML: wraps the content in a proper HTML structure
- Supports both .html and .htm files
Requirements
Known Issues
Release Notes
1.5.0
- Added HTML file support (.html, .htm)
- Smart HTML handling (preserves existing structure)
- Improved error handling and type safety
- Updated dependencies to latest versions
- Enhanced accessibility features
- Better TypeScript integration
1.0.0
First stable release:
- Live preview functionality
- Auto-reload on save
- Configurable port
- GitHub-style markdown rendering
- Context menu integration
- Full accessibility support
- BITS partnership integration
License
This extension is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
Copyright
Copyright © 2025 Techopolis Online Solutions, LLC. All rights reserved.
