A powerful VS Code extension that provides intelligent markdown formatting tools with real-time context awareness and seamless extension integration.
$(target) Smart Context Detection
- $(search) Automatically detects cursor position and document context
- $(gear) Buttons adapt based on current selection and content
- $(extensions) Works seamlessly with popular markdown extensions
- $(bold) Text Formatting: Bold, italic, strikethrough, inline code, highlight
- $(list-unordered) Document Structure: Headings, lists, blockquotes, code blocks, tables
- $(link) Media & Links: Image insertion, link creation, footnote support
- $(rocket) Advanced Features: Math expressions, Mermaid diagrams, TOC generation
Right-click in any markdown file to access organized formatting options:
| Format |
Headings |
New Column |
New Column |
 |
 |
 |
 |
📝 Format Text 🏗️ Structure ➕ Insert ⚙️ Editor Features
├── Bold ├── Headings ├── Links ├── Word Wrap
├── Italic ├── Lists ├── Images ├── Line Numbers
├── Code ├── Blockquotes ├── Tables └── Minimap
└── Highlight └── Code Blocks └── Footnotes
📊 Workflow Overview
graph TD
A[📝 Open Markdown File] --> B[🎯 Context Detection]
B --> C{Extension Available?}
C -->|Yes| D[🔧 Enhanced Features]
C -->|No| E[⚙️ Core Features]
D --> F[📤 Export Options]
E --> F
F --> G[✅ Formatted Document]
style A fill:#e1f5fe
style G fill:#c8e6c9
$(download) Installation & Quick Start
$(extensions) VS Code Marketplace
- $(code) Open VS Code
- $(search) Go to Extensions (
Ctrl+Shift+X)
- $(magnify) Search for "Markdown Toolbar"
- $(cloud-download) Click Install
$(file-text) First Use
- $(file-code) Open any
.md file
- $(menu) Right-click to see the context menu
- $(rocket) Start formatting with intelligent tools!
Access new performance diagnostics:
- Command Palette →
Markdown Toolbar: Performance Diagnostics
- $(graph) Real-time metrics: Cache hit rates, memory usage, operation timing
- $(pulse) 50%+ faster document processing with LRU caching
- $(shield) Zero crashes with comprehensive error boundaries
# Quick commands
Ctrl+Shift+P → "Markdown Toolbar: Switch Preset"
Ctrl+Shift+P → "Markdown Toolbar: Analyze Dependencies"
� User Journey
journey
title Markdown Toolbar User Experience
section Discovery
Find Extension: 5: User
Install: 5: User
section Setup
Open Markdown: 5: User
Right-click: 4: User
section Usage
Format Text: 5: User
Insert Elements: 4: User
Export: 3: User
section Advanced
Configure: 3: User
Extensions: 4: User
�🎨 Visual Examples
# Start with plain text
This is regular text content.
# Apply formatting
**This becomes bold text**
*This becomes italic text*
`This becomes inline code`
Advanced Features
# Tables
| Feature | Status |
|---------|--------|
| Context Menu | ✅ |
| PDF Export | ✅ |
# Code Blocks
```javascript
function formatText(text) {
return `**${text}**`; // Bold formatting
}
📋 Feature Comparison
╔══════════════════════════════════════════════════════════════╗
║ Feature Matrix ║
╠══════════════════════════════════════╦═══════╦═══════╦═══════╣
║ Feature ║ Core ║ Pro ║ Full ║
╠══════════════════════════════════════╬═══════╬═══════╬═══════╣
║ ✅ Basic Formatting (Bold/Italic) ║ ✓ ║ ✓ ║ ✓ ║
║ ✅ Lists & Headings ║ ✓ ║ ✓ ║ ✓ ║
║ ✅ Links & Images ║ ✓ ║ ✓ ║ ✓ ║
║ ✅ Code Blocks ║ ✓ ║ ✓ ║ ✓ ║
║ ✅ Context Menu ║ ✓ ║ ✓ ║ ✓ ║
║ 🔧 Table of Contents ║ ○ ║ ✓ ║ ✓ ║
║ 🔧 Real-time Linting ║ ○ ║ ✓ ║ ✓ ║
║ 🔧 Enhanced Preview ║ ○ ║ ○ ║ ✓ ║
║ 🔧 Image Paste ║ ○ ║ ○ ║ ✓ ║
║ 🔧 PDF Export ║ ○ ║ ○ ║ ✓ ║
╚══════════════════════════════════════╩═══════╩═══════╩═══════╝
✓ = Included ○ = Requires Extension 🔧 = Enhanced
⚙️ Configuration
Basic Settings
{
"markdownToolbar.preset": "core",
"markdownToolbar.statusBar.enabled": true,
"markdownToolbar.autoDetectDependencies": true
}
Advanced Options
{
"markdownToolbar.contextUpdateDebounce": 100,
"markdownToolbar.fallbackBehavior": "internal",
"markdownToolbar.showMissingExtensionNotifications": true
}
🎛️ Configuration Flow
stateDiagram-v2
[*] --> Settings
Settings --> Preset: Choose Preset
Preset --> Core: Basic Features
Preset --> Pro: Advanced Features
Preset --> Custom: Full Control
Core --> Extensions: Auto-detect
Pro --> Extensions
Custom --> Manual: Configure Buttons
Extensions --> Active: Working
Manual --> Active
Active --> [*]
note right of Preset
Choose your workflow:
- Core: Essential tools
- Pro: Professional suite
- Custom: Tailored experience
end note
🧩 Extension Compatibility
| Extension |
Features Unlocked |
Status |
| Markdown All in One |
TOC, Advanced Formatting |
✅ Auto-detected |
| markdownlint |
Real-time Linting |
✅ Auto-detected |
| Markdown Preview Enhanced |
Enhanced Previews |
✅ Auto-detected |
| Paste Image |
Direct Image Pasting |
✅ Auto-detected |
| markdown-pdf |
PDF Export |
✅ Auto-detected |
� Extension Integration Flow
graph LR
A[VS Code Extension Host] --> B[Markdown Toolbar]
B --> C{Extension Available?}
C -->|Markdown All in One| D[TOC Generation]
C -->|markdownlint| E[Real-time Linting]
C -->|MPE| F[Enhanced Preview]
C -->|Paste Image| G[Clipboard Images]
C -->|markdown-pdf| H[PDF Export]
D --> I[Enhanced Features]
E --> I
F --> I
G --> I
H --> I
C -->|None| J[Core Features Only]
style I fill:#e8f5e8
style J fill:#fff3e0
📦 Extension Ecosystem
🌟 VS Code Marketplace
│
├── 📚 Markdown All in One
│ ├── Table of Contents
│ ├── Auto-formatting
│ └── Keyboard shortcuts
│
├── 🔍 markdownlint
│ ├── Real-time linting
│ ├── Fix suggestions
│ └── Workspace analysis
│
├── 👁️ Markdown Preview Enhanced
│ ├── Rich previews
│ ├── Export options
│ └── Diagram support
│
└── 📝 Markdown Toolbar (This!)
├── Context-aware UI
├── Extension integration
└── Smart fallbacks
�📊 Architecture Overview
┌─────────────────────────────────────────────────────────────┐
│ 🎯 USER INTERFACE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Status Bar │ │ Context │ │ Settings │ │
│ │ │ │ Menu │ │ Panel │ │
│ │ • Preset │◄──►│ • Commands │◄──►│ • Options │ │
│ │ Switcher │ │ • Context │ │ • Advanced │ │
│ │ │ │ Aware │ │ Config │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────────────┐
│ 🎮 COMMAND LAYER │
│ │
│ • Command Factory │
│ • Extension Bridge │
│ • Context Detection │
└─────────────────────┘
│
┌─────────────────────┐
│ ⚙️ ENGINE LAYER │
│ │
│ • Formatting Logic │
│ • Document Analysis │
│ • Extension API │
└─────────────────────┘
│
┌─────────────────────┐
│ 🔧 SERVICE LAYER │
│ │
│ • Extension Mgmt │
│ • Caching System │
│ • State Persistence │
└─────────────────────┘
🏗️ System Architecture Flow
graph TB
subgraph "🎨 Presentation Layer"
UI[User Interface]
CM[Context Menu]
SB[Status Bar]
end
subgraph "🎮 Application Layer"
CF[Command Factory]
CD[Context Detector]
EM[Extension Manager]
end
subgraph "⚙️ Domain Layer"
FL[Formatting Logic]
DA[Document Analyzer]
CS[Caching Service]
end
subgraph "🔧 Infrastructure Layer"
VS[VS Code API]
FS[File System]
EX[Extensions]
end
UI --> CF
CM --> CF
SB --> CF
CF --> CD
CF --> EM
CD --> FL
EM --> FL
FL --> DA
FL --> CS
DA --> VS
CS --> FS
FL --> EX
style UI fill:#e3f2fd
style CF fill:#f3e5f5
style FL fill:#e8f5e8
style VS fill:#fff3e0
🧪 Testing & Quality
Test Coverage
- ✅ Unit Tests: 230+ tests passing
- ✅ Integration Tests: 9 tests passing
- ✅ TypeScript: 100% type safety
- ✅ ESLint: Code quality enforcement
Quality Assurance
- Automated Testing: CI/CD integration
- Performance Monitoring: Optimized for large documents
- Extension Compatibility: Verified with popular extensions
🧪 Testing Pyramid
graph TD
A[🧪 Testing Strategy] --> B[Unit Tests]
A --> C[Integration Tests]
A --> D[E2E Tests]
B --> B1[Command Logic]
B --> B2[Context Detection]
B --> B3[Extension Bridge]
C --> C1[VS Code API]
C --> C2[Extension Integration]
C --> C3[UI Components]
D --> D1[User Workflows]
D --> D2[Extension Scenarios]
style A fill:#e8f5e8
style B fill:#e3f2fd
style C fill:#fff3e0
style D fill:#fce4ec
🎮 Usage Examples
# 1. Open markdown file
# 2. Right-click anywhere
# 3. Choose from categories:
# - Format Text (bold, italic, code)
# - Structure (headings, lists)
# - Insert (links, images, tables)
# - Tools (lint, preview)
# 4. Formatting applied instantly
Keyboard Shortcuts
Ctrl+B # Bold
Ctrl+I # Italic
Ctrl+Shift+C # Inline code
Ctrl+K # Insert link
Ctrl+Shift+L # Toggle list
🎯 Interactive Workflow
sequenceDiagram
participant U as User
participant VS as VS Code
participant MT as Markdown Toolbar
participant EX as Extensions
U->>VS: Open .md file
VS->>MT: File activated
MT->>MT: Detect context
MT->>EX: Check extensions
EX-->>MT: Extension status
MT->>VS: Update UI
VS-->>U: Show context menu
U->>VS: Right-click + select
VS->>MT: Execute command
MT->>MT: Format content
MT->>VS: Apply changes
VS-->>U: Updated document
🔧 Development
Setup
git clone https://github.com/GSejas/markdown-toolbar
cd markdown-toolbar
npm install
npm run watch
Build Commands
npm run compile # Type check + lint + build
npm run test # Run all tests
npm run package # Production build
Project Structure
src/
├── commands/ # Command implementations
├── engine/ # Core formatting logic
├── services/ # Extension detection & caching
├── types/ # TypeScript definitions
├── ui/ # Status bar & UI components
└── utils/ # Helper functions
🏗️ Development Workflow
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A"
commit id: "Feature B"
checkout main
merge develop
commit id: "Release v1.0"
branch hotfix
checkout hotfix
commit id: "Bug fix"
checkout main
merge hotfix
commit id: "Release v1.0.1"
Benchmarks
- Context Detection: < 50ms for large documents
- Extension Scanning: < 100ms on startup
- Memory Usage: < 10MB additional
- UI Responsiveness: 60fps smooth interaction
Optimizations
- Smart Caching: Document analysis results cached
- Debounced Updates: Prevents UI flicker during typing
- Lazy Loading: Extensions loaded on-demand
- Atomic Operations: Undo-friendly single edits
gantt
title Performance Timeline
dateFormat YYYY-MM-DD
section Startup
Extension Load :done, des1, 2025-09-01, 2025-09-02
Context Setup :done, des2, after des1, 1d
UI Initialization :done, des3, after des2, 1d
section Runtime
Context Detection :active, des4, after des3, 2d
Command Execution : des5, after des4, 3d
UI Updates : des6, after des5, 2d
section Optimization
Caching System : des7, after des6, 5d
Lazy Loading : des8, after des7, 3d
🤝 Contributing
We welcome contributions! Here's how to get involved:
Ways to Contribute
- 🐛 Bug Reports: Use GitHub Issues
- ✨ Feature Requests: Suggest new capabilities
- 📖 Documentation: Improve guides and examples
- 🧪 Testing: Add test cases or improve coverage
- 💻 Code: Submit pull requests
Development Workflow
# 1. Fork the repository
# 2. Create feature branch
git checkout -b feature/amazing-feature
# 3. Make changes and test
npm run test
npm run lint
# 4. Submit pull request
🤝 Contribution Flow
graph LR
A[👤 Contributor] --> B[Fork Repository]
B --> C[Create Branch]
C --> D[Make Changes]
D --> E[Run Tests]
E --> F[Submit PR]
F --> G[Code Review]
G --> H{Merge?}
H -->|Yes| I[🎉 Success!]
H -->|No| J[💬 Feedback]
J --> D
style I fill:#c8e6c9
style J fill:#ffebee
📄 License
MIT License - Free for personal and commercial use
🙏 Acknowledgments
- VS Code Team: For the excellent extension API
- Markdown Community: For inspiration and standards
- Contributors: For making this project better
Made with ❤️ for the Markdown community
⭐ Star on GitHub • 🐛 Report Issues
