https://github.com/3ru/markdown-image-converter
🖼️ Convert Markdown files to elegant images (PNG/JPEG) right in VS Code. Simple, fast, and customizable.
https://github.com/3ru/markdown-image-converter
developer-tools image-converter markdown vscode vscode-extension
Last synced: 2 months ago
JSON representation
🖼️ Convert Markdown files to elegant images (PNG/JPEG) right in VS Code. Simple, fast, and customizable.
- Host: GitHub
- URL: https://github.com/3ru/markdown-image-converter
- Owner: 3ru
- License: mit
- Created: 2025-02-09T09:50:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-28T23:19:14.000Z (3 months ago)
- Last Synced: 2026-03-29T01:44:16.237Z (3 months ago)
- Topics: developer-tools, image-converter, markdown, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=ryuya.markdown-image-converter
- Size: 44.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Markdown Image Converter
Convert your markdown files to PNG/JPEG images directly in VS Code. Perfect for creating social media posts, documentation screenshots, or visual content from your markdown files.
## ✨ Features
- 🖼️ **One-Click Conversion**: Convert any markdown file to PNG/JPEG with a single command
- 📱 **Multiple Output Formats**: Support for PNG and JPEG formats with customizable quality settings
- 🎨 **Zenn-style Formatting**: Beautiful output using Zenn's markdown styling
- 📏 **Resolution Options**: Choose between standard and HD quality outputs
- ⚡ **Split Mode**: Split and convert markdown sections using customizable delimiters (e.g., `---`)
- 🎯 **Flexible Output**: Customizable output directory and file naming
## 📦 Installation
1. Open VS Code
2. Press `Ctrl+P` / `Cmd+P`
3. Type `ext install ryuya.markdown-image-converter`
4. Press Enter
## 🚀 Quick Start
1. Open any markdown file
2. Use the command palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and type "Convert to Image"
3. Choose your desired output format (PNG/JPEG)
4. The image will be generated based on your settings
## 📝 Usage
### Split Mode Demo
Split your markdown into multiple images using custom delimiters:
## ⚙️ Extension Settings
This extension contributes the following settings:
| Setting | Type | Default | Description |
| ------------------------------------------ | -------- | --------------------- | ---------------------------------------------------------------------- |
| `markdown-image-converter.outputFormat` | `string` | `"png"` | Default output format (`"png"` or `"jpeg"`) |
| `markdown-image-converter.resolution` | `string` | `"hd"` | Output resolution (`"standard"` or `"hd"`) |
| `markdown-image-converter.splitter` | `string` | `""` | Delimiter to split markdown sections (e.g., `"---"`) |
| `markdown-image-converter.splitOutputDir` | `string` | `"{name}-{format}"` | Output directory pattern for split images |
| `markdown-image-converter.margin` | `number` | `12` | Margin around the edges of the exported image, in pixels |
| `markdown-image-converter.executablePath` | `string` | `""` | Chrome or Chromium executable path to use for rendering |
## ⌨️ Commands
| Command | Description |
| ------------------------------------- | --------------- |
| `markdown-image-converter.exportPNG` | Convert to PNG |
| `markdown-image-converter.exportJPEG` | Convert to JPEG |
## 🔍 Known Issues @ Roadmap
- Large markdown files may take longer to convert
## 📚 Resources
- [Zenn Markdown Guide](https://zenn.dev/zenn/articles/markdown-guide)
- [Zenn Content CSS](https://github.com/zenn-dev/zenn-editor/tree/canary/packages/zenn-content-css)
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
**🌟 Enjoying the extension? [Rate it on the marketplace](https://marketplace.visualstudio.com/items?itemName=ryuya.markdown-image-converter)!**
Found a bug? Please [open an issue](https://github.com/3ru/markdown-image-converter/issues).
Made with ❤️ by [Ryuya](https://github.com/3ru)