A Chrome extension that makes your markdown files look beautiful! Open any .md file in Chrome and watch it transform into gorgeously formatted HTML with syntax highlighting, dark mode, and more.
Ever opened a markdown file in your browser and been disappointed by the plain text? We felt the same way. This extension automatically detects markdown files and renders them with:
✨ Beautiful GitHub-style formatting - Looks just like GitHub 🎨 Syntax highlighting - 15+ programming languages supported 🌗 Dark & Light themes - Easy on the eyes, day or night 📋 One-click copy - Copy code blocks instantly ✅ Task lists - Checkboxes that actually look like checkboxes 📄 Raw view toggle - See the original markdown anytime ✏️ Paste & render - Paste or type markdown directly and render it on the fly 🔍 Render selected text - Select markdown on any webpage and render it instantly
-
Download this repository (click the green "Code" button → Download ZIP)
-
Load in Chrome:
- Open Chrome and go to
chrome://extensions/ - Turn on Developer mode (toggle in top-right)
- Click Load unpacked and select the folder
- Open Chrome and go to
-
Enable file access (important!):
- Find Markdown Viewer in your extensions
- Click Details
- Enable "Allow access to file URLs"
That's it! 🎉
Just drag any .md file into Chrome, or use File → Open to browse for one. The extension automatically takes over and renders it beautifully.
See some markdown on a webpage? Select it and render it instantly:
- Highlight any text on a webpage
- Click the Markdown Viewer icon in the toolbar, or right-click and choose "Render selection as Markdown"
- A new tab opens with the selected text rendered as beautiful markdown
This works on any webpage — great for previewing markdown in GitHub comments, READMEs, documentation, chat messages, or anywhere else.
Want to quickly preview some markdown? You can paste or type it directly:
- Click the extension icon (no text selection needed)
- Click the
{ }button in the top-right to open the editor - Paste or type your markdown
- Click
📄(or press Ctrl/Cmd+Enter) to render it
Toggle back and forth between editing and rendered view anytime!
- 🌙/☀️ Toggle dark/light theme (your choice is saved)
- { } Open the markdown editor / view raw source
- 📄 Render the editor content back to formatted markdown
- Filename Always know which file you're viewing
Hover over any code block to see a Copy button appear. Click it to copy the code to your clipboard!
- Text formatting: bold, italic,
strikethrough - Headers: All levels (H1-H6)
- Lists: Ordered, unordered, and nested
- Links & Images: External and relative paths
- Tables: With alignment support
- Task lists:
- [x]and- [ ]become real checkboxes - Blockquotes: Clean, styled quotes
- Horizontal rules: Visual separators
- Inline & block code: Syntax highlighted
Syntax highlighting works for:
JavaScript • TypeScript • JSX • TSX • Python • Go • Rust • Java • PHP • Ruby • Bash • JSON • YAML • SQL • CSS • Markdown
Missing your favorite language? It's easy to add more!
# My Project
This is my **project** with some `code`...
![Beautiful rendered markdown with styling, colors, and formatted code blocks]
🔒 100% Local - All rendering happens in your browser 🚫 No tracking - Zero analytics, zero data collection 🌐 No network requests - Works completely offline ✅ Open source - Review the code yourself
Your files never leave your computer.
Images and links can use relative paths:
[Read more](./docs/guide.md)Just make sure the paths are correct relative to your markdown file!
While viewing a file:
- Ctrl/Cmd + F: Search in page
- Ctrl/Cmd + +/-: Zoom in/out
- F5: Reload if file changed on disk
Want to tweak the colors or add more languages? All the code is in plain JavaScript and CSS:
- Styling: Edit
styles/viewer.css - Code highlighting: Modify
lib/prism.js - Markdown parsing: Configure
viewer.js
After making changes, just click the reload button in chrome://extensions/.
Issue: Markdown files still show as plain text Fix: Make sure "Allow access to file URLs" is enabled (see Installation step 3)
Issue: Code blocks have no syntax highlighting Fix: Specify the language in your markdown:
```javascript
// your code here
```Issue: Images don't load
Fix: Use absolute paths like file:///full/path/to/image.png or relative paths from the markdown file
Open an issue on GitHub and we'll help you out!
Found a bug? Want to add a feature? Contributions are welcome!
- Fork the repository
- Make your changes
- Test thoroughly
- Submit a pull request
Or just open an issue to discuss ideas!
- marked.js - Fast markdown parser
- Prism.js - Lightweight syntax highlighter
- GitHub Markdown CSS - GitHub's own markdown styling
Mathieu-Philippe Bourgeois (@matpb) Developer, creator of Cortex AI
Cortex - AI assistant Mathieu-Philippe's personal AI assistant, powered by Claude. Built to help with coding, automation, and creative projects.
MIT License - Free to use, modify, and share!
See LICENSE file for details.
- ✏️ Paste or type markdown directly in the editor and render it on the fly
- 🔄 Toggle between editing and rendered view with the
{ }/📄button - ⌨️ Ctrl/Cmd+Enter keyboard shortcut to render from editor
- 📝 Updated empty state with editor instructions
- 🚫 Helpful error page for restricted pages (chrome://, Web Store) with setup instructions
- 📦 Added
package.shscript for building the Chrome Web Store zip
- 🔍 Render selected text as markdown from any webpage
- 🖱️ Right-click context menu: "Render selection as Markdown"
- 🖼️ Clickable extension icon to render selected text
- 🛠️ Friendly instructions when no text is selected
- 🐛 Fixed table rendering contrast in light theme
- 🎉 Initial release
- ✨ GitHub Flavored Markdown support
- 🎨 Syntax highlighting for 15+ languages
- 🌗 Dark/light theme toggle
- 📋 Copy buttons on code blocks
- ✅ Task list rendering
- 📄 Raw markdown view
Made with ❤️ by humans and AI working together
If this extension makes your life easier, give it a ⭐ on GitHub!