A Visual Studio Code extension that allows you to preview Markdown files in GitHub style, with dark and light theme support, real-time automatic updates, and various customization options.
- 🎨 GitHub Style Preview: Preview Markdown files with the official GitHub style
- 🌓 Dark/Light Themes: Toggle between dark and light themes with one click
- 🔄 Automatic Updates: Preview updates automatically while editing the file
- 💾 Per-File Preferences: Each file saves its theme preference
- 🚀 Auto-Open: Automatically opens preview when opening a Markdown file
- 🖥️ Browser Preview: Option to open preview in external browser
- 📁 Multiple Files: Supports multiple previews open simultaneously
- 🎯 Column Protection: Keeps preview in a dedicated column
- 📐 Math Support: Render mathematical formulas with KaTeX (LaTeX/MathJax syntax)
- 💾 Export Functionality: Export preview as standalone HTML file
Install it from the VS Code Marketplace, or from Open VSX if you use VSCodium, Cursor, Windsurf or another editor based on VS Code.
Or from inside the editor:
- Open VS Code
- Go to Extensions section (
Ctrl+Shift+XorCmd+Shift+X) - Search for "GitHub Style Markdown Preview"
- Click "Install"
There are three ways to open the preview:
- Status Bar Button: Click the "Markdown Preview" button in the status bar (bottom right corner)
- Keyboard Shortcut: Press
Ctrl+Alt+P(Windows/Linux) orCmd+Opt+P(Mac) - Command Palette: Press
F1orCtrl+Shift+Pand type "Open Markdown Preview"
- Button in Preview: Click the 🌙/☀️ button in the top right corner
- Keyboard Shortcut: Press
Ctrl+Shift+T(Windows/Linux) orCmd+Shift+T(Mac) - Command Palette: Type "Toggle Preview Theme"
When enableExport is enabled, an 💾 Export button appears in the bottom right corner of the preview. Click it to save the rendered preview as a standalone HTML file.
When enableMath is enabled, the preview supports rendering mathematical formulas using KaTeX:
- Inline math:
$formula$or\(formula\) - Display math:
$$formula$$or\[formula\]
The extension supports the following settings:
Automatically opens preview when a Markdown file is opened.
Default: false
{
"github-style-markdown-preview.autoOpen": true
}Delay in milliseconds before updating preview after editing (debouncing).
Default: 300
{
"github-style-markdown-preview.updateDelay": 500
}Supported file patterns (glob syntax).
Default: ["*.md"]
{
"github-style-markdown-preview.supportedFiles": [
"*.md",
"*.markdown",
"README*"
]
}Protects the preview column (column 2) from other files.
Default: false
{
"github-style-markdown-preview.protectPreviewColumn": true
}Shows a "Web" button in the IDE preview to open in external browser.
Default: false
{
"github-style-markdown-preview.openInBrowser": true
}Note:
- When enabled, a "🌐 Web" button appears in the IDE preview
- Clicking the button opens preview in browser and closes IDE preview
- Browser preview uses the saved preferred theme (no dark/light mode toggle button)
- Requires an open workspace to work correctly (creates temporary HTML file in
.vscodefolder)
Maximum width of content in preview (in pixels). Use "auto" for full width.
Default: 980 (pixels)
Note: GitHub uses 980px as default width.
{
"github-style-markdown-preview.maxWidth": 980
}Or for full width:
{
"github-style-markdown-preview.maxWidth": "auto"
}Enables emoji rendering (e.g., 😄, ❤️). Applies to both IDE and browser previews.
Default: true
{
"github-style-markdown-preview.enableEmoji": true
}Converts single line breaks to HTML line breaks (similar to GitHub behavior). Applies to both IDE and browser previews.
Default: false
{
"github-style-markdown-preview.enableBreaks": true
}Enables math formula rendering with KaTeX (LaTeX/MathJax syntax). Supports inline math: $formula$ or \(formula\), and display math: $$formula$$ or \[formula\]. Applies to IDE preview only.
Default: false
{
"github-style-markdown-preview.enableMath": true
}Shows an "Export" button in the preview to save rendered preview as HTML file. The button appears in the bottom right corner of the preview. Applies to IDE preview only.
Default: false
{
"github-style-markdown-preview.enableExport": true
}Automatically closes preview when the Markdown file is closed (IDE preview only).
Default: true
{
"github-style-markdown-preview.closeOnFileClose": true
}Focuses the editor after opening preview, allowing you to continue editing (IDE preview only).
Default: true
{
"github-style-markdown-preview.focusEditorAfterOpen": true
}The default shortcut to open preview is Ctrl+Alt+P (or Cmd+Opt+P on Mac).
To customize the shortcut:
- Press
Ctrl+K Ctrl+S(orCmd+K Cmd+Son Mac) to open Keyboard Shortcuts - Search for "Open Markdown Preview"
- Double-click the current shortcut
- Press the desired new key combination
- The shortcut will be updated automatically
| Shortcut | Action |
|---|---|
Ctrl+Alt+P / Cmd+Opt+P |
Open preview (customizable in Keyboard Shortcuts) |
Ctrl+Shift+T / Cmd+Shift+T |
Toggle theme (dark/light) |
Note: To customize the open preview shortcut, go to File > Preferences > Keyboard Shortcuts (or Ctrl+K Ctrl+S) and search for "Open Markdown Preview".
For more detailed information, see the Usage Guide.
- Visual Studio Code 1.85.0 or higher
No known issues at this time.
See CHANGELOG.md for complete version history.
- GitHub-style preview for Markdown files
- Dark and light theme support with toggle
- Real-time automatic updates
- Theme preferences saved per file
- Optional auto-open
- External browser preview
- Preview column protection
- Customizable settings (maxWidth, emoji, breaks, etc.)
- Full support for GitHub Flavored Markdown
- Support for GitHub emojis (:smile:, :rocket:, etc.)
Questions, feedback or ideas: contact@mccprogrammer.com.
If the extension helps you, a coffee on Ko-fi makes a big difference.
Contributions are welcome! Please open an issue or pull request in the repository.
This project is licensed under the MIT License.
- GitHub Markdown CSS for the CSS style
- markdown-it for the Markdown renderer
- markdown-it-emoji for emoji support
Enjoy the GitHub Style Markdown Preview extension! 🎉