md2img - Markdown to High-DPI iPhone / WeChat Image

Convert Markdown files into beautiful, print-quality screenshots optimized for:

• iPhone Retina display (3x pixel density)
• WeChat Moments sharing (survives WeChat compression, stays crisp)

Core Script

All rendering is done by scripts/md2img.js. It uses Playwright (Chromium)

to render Markdown as styled HTML, then takes a full-page screenshot at 3x

device scale factor.

Workflow

Step 1 - Ensure Environment

Check if the environment is set up. Run node --version to confirm Node.js 16+

is available. If scripts/node_modules does not exist, run setup:

cd ~/.workbuddy/skills/md2img/scripts
bash setup.sh

If node is missing, install it:

brew install node   # macOS

Step 2 - Basic Conversion

cd ~/.workbuddy/skills/md2img/scripts
node md2img.js /path/to/your-file.md

Output: /path/to/your-file.png (same directory as input by default)

Step 3 - Choose Format Based on Content

Step 4 - Advanced Options

-o <path>           Output file path
-w <px>             Logical CSS width (default: 390, iPhone 14 width)
-s <n>              Device scale factor (default: 3, = 1170px physical)
-f png|jpeg         Format (default: png)
-q <0-100>          JPEG quality (default: 92)
--theme light|dark  Color theme (default: light)
--padding <px>      Body padding (default: 28)
--font-size <px>    Base font size (default: 17)
--multi             Split into multiple images by H1 heading

Common Recipes

# Standard article -> WeChat-ready PNG
node md2img.js article.md

# Long technical doc -> JPEG (smaller file, less double-compression loss)
node md2img.js doc.md -f jpeg -q 92

# Dark theme screenshot
node md2img.js notes.md --theme dark -o notes-dark.png

# Split long post into 9 images for WeChat grid
node md2img.js long-post.md --multi

# Custom width for iPad-style layout
node md2img.js report.md -w 768 -s 2

# Larger font for easier reading
node md2img.js article.md --font-size 19

Resolution Rationale

Why 390px x 3 = 1170px physical?

• iPhone 14/15 has 390px logical width, at 3x Retina = 1170px physical
• WeChat Moments triggers heavy compression only above 2000px (long edge)
• 1170px < 2000px, so WeChat applies only light compression (~85% quality)
• Text remains sharp after WeChat compression because starting resolution is high

For detailed specs, see references/wechat_image_specs.md.

Troubleshooting

Output Quality Guidelines

• Minimum: -s 2 (780px) - acceptable for casual sharing
• Recommended: -s 3 (1170px) - sharp on iPhone, survives WeChat
• Maximum useful: -s 4 (1560px) - for printing or high-stakes sharing
• Avoid: -s 6+ exceeds 2000px, triggers WeChat heavy compression