A powerful and intuitive VS Code extension that supercharges your Markdown editing experience with a comprehensive visual toolbar, keyboard shortcuts, and a built-in visual editor.
🎥 Video Demo
▶️ Watch Full Demo on YouTube (16:09)
🚀 Getting Started
Installation from Marketplace
- Open VS Code
- Go to Extensions (Cmd/Ctrl+Shift+X)
- Search for "Markdown Formatter & Toolbar"
- Click Install
- Open any
.md file and start formatting!
First Steps
Once installed:
- Open any Markdown (
.md) file
- Look for the visual editor button (📋) in the top-right corner
- Use toolbar buttons for quick formatting
- Try keyboard shortcuts for faster editing
- Access all commands via Command Palette (Cmd/Ctrl+Shift+P)
✨ Features
📝 Text Formatting
Format your text with ease using intuitive toolbar buttons or keyboard shortcuts:
| Feature |
Syntax |
Shortcut |
Description |
| Bold |
**text** |
Cmd/Ctrl+B |
Make text bold |
| Italic |
*text* |
Cmd/Ctrl+I |
Italicize text |
| Strikethrough |
~~text~~ |
- |
Strike through text |
| Underline |
<u>text</u> |
Cmd/Ctrl+U |
Underline text |
| Inline Code |
`text` |
Cmd/Ctrl+Shift+C |
Add inline code |
| Code Block |
```language |
- |
Multi-line code with syntax highlighting |
📰 Headings
Organize your content with hierarchical headings:
- Heading 1 -
# (Cmd/Ctrl+Shift+1)
- Heading 2 -
## (Cmd/Ctrl+Shift+2)
- Heading 3 -
### (Cmd/Ctrl+Shift+3)
📋 Lists & Tasks
Create organized lists and track tasks:
- Bullet List - Unordered list items (
- item)
- Numbered List - Ordered list items (
1. item)
- Checklist - Task lists with checkboxes (
- [ ] task)
- Mark Checked/Unchecked - Toggle task completion status
🔗 Content Insertion
Enhance your documents with rich content:
- Links - Insert hyperlinks with custom text (Cmd/Ctrl+K)
- Images - Add images from local files or URLs
- Tables - Create customizable tables (1-10 columns, 1-20 rows)
- Horizontal Rules - Add section dividers (
---)
- Quotes - Format blockquotes (
> text)
🖼️ Advanced Image Insertion
Insert images seamlessly with two convenient methods:
Method 1: Local Files
- Click the image button or run "Markdown: Insert Image"
- Choose "Browse Local File"
- Select an image from your computer
- Image is automatically copied to the
images/ folder in your workspace
- Markdown syntax is inserted with proper path
Benefits:
- ✅ Images are stored within your project
- ✅ Works offline
- ✅ Version control friendly
Method 2: External URLs
- Click the image button or run "Markdown: Insert Image"
- Choose "Enter URL"
- Enter the image URL (must start with http:// or https://)
- Markdown syntax is inserted:
Benefits:
- ✅ No local storage needed
- ✅ Direct hotlinking to external resources
- ✅ Quick and simple
PNG, JPG, JPEG, GIF, SVG, WEBP, BMP, ICO
📊 Dynamic Table Creation
Create professional tables with an interactive modal:
- Trigger: Click the table button (⊞) or run "Markdown: Insert Table"
- Configure: Enter your desired dimensions
- Generate: Click "Insert" and your table appears instantly!
Example Output:
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
⌨️ Keyboard Shortcuts
Boost your productivity with these keyboard shortcuts:
Text Formatting
| Action |
Windows/Linux |
Mac |
| Bold |
Ctrl+B |
Cmd+B |
| Italic |
Ctrl+I |
Cmd+I |
| Underline |
Ctrl+U |
Cmd+U |
| Inline Code |
Ctrl+Shift+C |
Cmd+Shift+C |
Structure
| Action |
Windows/Linux |
Mac |
| Heading 1 |
Ctrl+Shift+1 |
Cmd+Shift+1 |
| Heading 2 |
Ctrl+Shift+2 |
Cmd+Shift+2 |
| Heading 3 |
Ctrl+Shift+3 |
Cmd+Shift+3 |
| Link |
Ctrl+K |
Cmd+K |
Tip: All shortcuts only work when editing Markdown files
🎯 Visual Editor
Launch the built-in Visual Editor for a WYSIWYG-like experience:
- Click the visual editor icon (📋) in the top-right corner
- Split-pane interface: Editor on left, live preview on right
- Use the toolbar for formatting
- See changes in real-time
- Full undo/redo support (50 states)
Features:
- Live Markdown preview
- Interactive toolbar
- Modal dialogs for links, images, and tables
- Clipboard integration
- Real-time rendering
License
ISC License
👤 Author
Rohit
📝 Changelog
Version 1.0.0 (December 2025)
🎉 Initial Release
- ✨ Complete text formatting suite (bold, italic, strikethrough, underline, code)
- 📰 Heading support (H1, H2, H3)
- 📋 List creation (bullet, numbered, checklist)
- 🔗 Link and image insertion
- 📊 Interactive table generator
- 🎨 Visual editor with live preview
- ⌨️ Comprehensive keyboard shortcuts
- 🖼️ Smart image handling (local files + URLs)
- 📁 Automatic image folder management
🙏 Acknowledgments
- Built with ❤️ using VS Code Extension API
- Markdown rendering powered by VS Code's native capabilities
- Icons from VS Code's Codicon library
Enjoy using Markdown Formatter & Toolbar Extension! Happy writing! 📝✨
