MDBaker

MDBaker is a VS Code extension that takes your Markdown files with images and bakes everything into a single, standalone file. The core purpose is to create completely self-contained outputs—one file that contains all content, images, styles, and scripts—with no external dependencies.

The Problem It Solves: When sharing Markdown content, you typically need to manage multiple files (markdown, images, stylesheets) or rely on external services. MDBaker eliminates this by creating a single file that works anywhere, anytime, without internet connectivity or external resources.

How It Works:

• Takes your Markdown file and all referenced images
• Processes and optimizes images (compression, resizing, format conversion)
• Embeds everything directly into one file: images as base64 data URIs, styles as embedded CSS, scripts as embedded JavaScript
• Generates a standalone file ready to share, deploy, or present

Output Formats:

• HTML documents - Single HTML file with all content, images, and styles embedded
• PDF documents - Single PDF file with all content, images, and styling preserved
• Reveal.js presentations - Single HTML file with Reveal.js library baked in (or CDN option)
• DOCX documents - Single Word document with embedded images

Key Benefits:

• One file, everything included - No external dependencies, no broken image links, no missing styles
• Offline ready - Generated files work completely offline
• Easy sharing - Send one file instead of a folder of assets
• Image optimization - Automatically compresses and optimizes images while preserving quality
• Professional styling - Clean, responsive designs with light/dark theme support

Features

Rich HTML Output

• Converts Markdown to styled HTML documents
• Responsive design
• Light and dark theme support with toggle

Enhanced Styling

• GitHub-inspired syntax highlighting for code blocks
• Automatic table of contents generation
• Copy-to-clipboard buttons for code blocks
• Image modal viewer

Image Processing

• Automatic image optimization and compression
• Resizes images to configurable maximum dimensions
• Preserves PNG format for images with transparency
• Converts images without transparency to optimized JPEG format
• Embeds SVG images inline for better quality
• Preserves GIF animations
• Optimizes WebP images (keeps WebP if smaller, otherwise converts)
• Embeds images directly in HTML (no external files needed)

Export Formats

• HTML documents with enhanced styling
• PDF documents with professional formatting and embedded images
• Reveal.js presentations (interactive slides) with library baked into the file for offline use
• DOCX documents

Configurable

• Customize image compression settings (max width, height, quality)
• Configure output file naming prefix
• Adjustable logging levels
• Default theme preference (light/dark)
• Reveal.js theme selection

Processing Statistics

• Shows processing time
• Displays image compression statistics
• Logs detailed information to output channel

Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
3. Search for "MDBaker"
4. Click Install

From VSIX File

1. Download the .vsix file from the Releases page
2. Open VS Code
3. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open Command Palette
4. Type "Install from VSIX" and select it
5. Choose the downloaded .vsix file

Usage

HTML Export

1. Right-click on any .md file in the Explorer
2. Select "Bake MD to HTML" from the context menu
3. The extension will:
   • Convert your Markdown to HTML
   • Process images
   • Generate a baked_[filename].html file in the same directory
   • Automatically open the generated HTML file

Reveal.js Presentation Export

1. Right-click on any .md file in the Explorer
2. Select "Bake MD to Reveal.js" from the context menu
3. The extension will:
   • Convert your Markdown to a Reveal.js presentation
   • Process images
   • Generate a baked_[filename].html file with interactive slides
   • Bundle Reveal.js library directly into the file for offline use (default), or use CDN links (configurable)
   • Automatically open the presentation

Slide Structure:

• Use --- to separate horizontal slides
• Use -- within a slide to create vertical (nested) slides

Example:

# Slide 1

Content here

---

# Slide 2

More content

--

## Vertical Slide

Nested content

PDF Export

1. Right-click on any .md file in the Explorer
2. Select "Bake MD to PDF" from the context menu
3. The extension will:
   • Convert your Markdown to HTML (with all styling and images)
   • Process and optimize images
   • Generate a baked_[filename].pdf file with professional formatting
   • Use the same styling as HTML export for consistent appearance
   • Automatically open the generated PDF file

Note: PDF generation uses Puppeteer, which downloads Chromium on first use (~170MB). This is a one-time download.

DOCX Export

1. Right-click on any .md file in the Explorer
2. Select "Bake MD to DOCX" from the context menu
3. The extension will generate a DOCX file

Output

The extension generates a standalone HTML file with:

• All styles embedded
• All images embedded as base64 data URIs
• No external dependencies required
• Ready to share or deploy

Your Directory
├── example.md
└── baked_example.html  ← Generated file

Configuration

You can customize the extension behavior through VS Code settings:

Image Settings

• mdbaker.image.maxWidth - Maximum width for processed images (default: 1024, range: 100-4096)
• mdbaker.image.maxHeight - Maximum height for processed images (default: 1024, range: 100-4096)
• mdbaker.image.jpegQuality - JPEG quality for compressed images (default: 80, range: 1-100)

Output Settings

• mdbaker.output.prefix - Prefix for generated HTML files (default: "baked_")

Logging

• mdbaker.logging.level - Logging level: "error", "warn", "info", or "debug" (default: "info")

Theme

• mdbaker.theme.defaultMode - Default theme mode: "light" or "dark" (default: "light")
• mdbaker.theme.style - Theme style: "modern" or "classic" (default: "classic")

Reveal.js Settings

• mdbaker.revealjs.theme - Reveal.js theme: "white", "black", "league", "beige", "sky", "night", "serif", "simple", or "solarized" (default: "white")
• mdbaker.revealjs.useCdn - Control how Reveal.js is included in presentations:
  • false (default) - Reveal.js library is baked directly into the HTML file for offline use
  • true - Use CDN links instead (requires internet connection to load presentation)

Accessing Settings

1. Press Ctrl+, (or Cmd+, on Mac) to open Settings
2. Search for "MDBaker"
3. Adjust settings as needed

Requirements

• VS Code: Version 1.96.0 or higher

Known Limitations

• Large images embedded as base64 may increase HTML file size
• Code block language detection relies on Markdown syntax highlighting
• PNG images with transparency are preserved as PNG (may be larger than JPEG)
• SVG images are sanitized (scripts and event handlers are removed for security)

Troubleshooting

Extension Not Working

1. Check the Output panel (View → Output) and select "MDBaker" from the dropdown
2. Look for error messages in the output
3. Verify the file is a .md file
4. Try reloading the window: Ctrl+Shift+P → "Developer: Reload Window"

Images Not Processing

• Check that image paths in your Markdown are correct
• Verify images exist at the specified paths
• Check the Output panel for specific error messages
• SVG images are embedded inline (not skipped)

HTML Not Generated

• Ensure you have write permissions in the directory
• Check the Output panel for errors
• Verify the Markdown file is valid

License

See LICENSE.md for details.

For third-party licenses, see THIRD_PARTY_LICENSES.md.

Support

• Report Issues
• Request Features
• For questions, open an issue on GitHub

Made for the VS Code community