Markdown Mobile Export#

Faithful Markdown → mobile long image, no content rewriting.

When to Use#

• Local .md file → phone-friendly long image
• Pasted Markdown text → PNG or JPG
• Article-style faithful export (not poster or carousel redesign)
• Intermediate HTML needed for inspection alongside image

Do Not Use#

• Poster redesigns where content should be rewritten into marketing blocks
• Carousel slicing across multiple images
• Rich web app UI design work
• PDF output

Quick Start#

bash

# From file
python3 {baseDir}/scripts/markdown_to_long_image.py \
  --input-file /path/to/file.md

# From pasted text
python3 {baseDir}/scripts/markdown_to_long_image.py \
  --markdown-text "# Title\n\nBody"

# Custom output path and format
python3 {baseDir}/scripts/markdown_to_long_image.py \
  --input-file /path/to/file.md \
  --output-image /path/to/output.png \
  --format jpg

Defaults#

AspectDefaultInputMarkdown file path or pasted textOutputPNG long image + HTML sidecar retained on diskStyleFaithful conversion, mobile-first, zh-CN typographyWidth820px card layout with warm earth-tone themeBrowserLocal Chrome/Chromium/Edge/Brave → Playwright fallback

Workflow#

1. Resolve input ( --input-file or --markdown-text)
2. Normalize pasted text into a concrete .source.md file when needed
3. Render mobile-friendly HTML with embedded CSS
4. Detect local Chromium-family browser
5. Capture full-page screenshot (segmented stitch with overlap)
6. Fall back to Playwright Chromium if no local browser is usable
7. Print JSON result with output_html and output_image paths

Scripts#

ScriptPurposescripts/markdown_to_long_image.pyCLI entry point, orchestrates pipelinescripts/render_markdown_mobile_long_image.pyMarkdown → styled mobile HTMLscripts/export_long_image.pyBrowser detection + screenshot export

References#

TopicFilePipeline detailsreferences/workflow.mdCommon issuesreferences/troubleshooting.md

Validation#

After generating output, verify:

1. HTML file exists at reported path
2. Image file exists and is non-zero bytes
3. Image is full-page capture (not single viewport crop)
4. Remote images loaded without broken placeholders