exporting-to-png

Exporting to PNG

Convert code snippets, Markdown content, terminal output, diagrams, or rendered UI components into PNG image files.

Methods

1. HTML → PNG via Headless Browser

The most flexible approach. Render any content as HTML and screenshot it.

# Using Playwright (if available)
npx playwright screenshot --full-page "file:///path/to/content.html" output.png
 
# Using Puppeteer one-liner
node -e "

Steps:

1. Generate an HTML file with the content styled appropriately (syntax highlighting, padding, fonts)
2. Use a headless browser to render and capture
3. Crop if needed using an image tool

2. Code → PNG with Carbon or Silicon

For styled code screenshots:

3. Mermaid Diagrams → PNG

4. SVG → PNG

5. Terminal Output → PNG

Workflow

1. Determine the content type (code, diagram, HTML, terminal, SVG)
2. Check which tools are available in the environment (which silicon, npx --help, etc.)
3. Choose the best method and generate the PNG
4. Verify the output exists and is non-empty: file output.png && ls -la output.png
5. Report the file path and dimensions

Tips

• For code screenshots, use a dark theme with generous padding (32px+) for a polished look
• Set deviceScaleFactor: 2 in Playwright/Puppeteer for retina-quality output
• For transparent backgrounds, use --background transparent or omitBackground: true
• If no specialized tool is installed, fall back to the HTML + headless browser method — it works for everything