تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

exporting-to-png

النجوم٤

التفرعات٠

آخر تحديث٢٤ يونيو ٢٠٢٦ في ٠٢:٤٣

Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

0xAidan

0xAidan/polymarket-bot-test

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو البرمجياتمهن الحاسوب والرياضيات·SOC 15-1252

SKILL.md

readonly

name	exporting-to-png
description	Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.
user-invocable	true

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 "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(\`<html>...</html>\`);
  await page.screenshot({ path: 'output.png', fullPage: true });
  await browser.close();
})();
"

Steps:

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

2. Code → PNG with Carbon or Silicon

For styled code screenshots:

# silicon (Rust CLI, fast)
silicon --language python --output code.png source.py
silicon --from-clipboard --output code.png

# Or generate a Carbon URL for browser capture
# https://carbon.now.sh/?l=python&code=<url-encoded-code>

3. Mermaid Diagrams → PNG

# Using mermaid-cli
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or with Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png

4. SVG → PNG

# Using sharp (Node.js)
node -e "
const sharp = require('sharp');
sharp('input.svg').png().toFile('output.png');
"

# Using Inkscape CLI
inkscape input.svg --export-type=png --export-filename=output.png

# Using ImageMagick
convert input.svg output.png

5. Terminal Output → PNG

# Using termshot (if installed)
termshot -- ls -la

# Manual approach: capture output, wrap in HTML with monospace font, screenshot

Workflow

Determine the content type (code, diagram, HTML, terminal, SVG)
Check which tools are available in the environment (which silicon, npx --help, etc.)
Choose the best method and generate the PNG
Verify the output exists and is non-empty: file output.png && ls -la output.png
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

المزيد من هذا المستودع

نفس المستودع

accessibility-auditing

0xAidan/polymarket-bot-test

Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse.

2026-06-244

adding-analytics

0xAidan/polymarket-bot-test

Add PostHog analytics to a web application, including event tracking, page views, feature flags, and session replay.

2026-06-244

adding-api-docs

0xAidan/polymarket-bot-test

Generate OpenAPI/Swagger documentation for an API, including endpoint schemas, request/response types, and interactive docs UI.

2026-06-244

adding-auth

0xAidan/polymarket-bot-test

Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.

2026-06-244

adding-docker

0xAidan/polymarket-bot-test

Dockerize an application with a production-ready Dockerfile, docker-compose setup, and .dockerignore.

2026-06-244

adding-e2e-tests

0xAidan/polymarket-bot-test

Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.

2026-06-244

name	exporting-to-png
description	Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.
user-invocable	true

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 "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(\`<html>...</html>\`);
  await page.screenshot({ path: 'output.png', fullPage: true });
  await browser.close();
})();
"

Steps:

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

2. Code → PNG with Carbon or Silicon

For styled code screenshots:

# silicon (Rust CLI, fast)
silicon --language python --output code.png source.py
silicon --from-clipboard --output code.png

# Or generate a Carbon URL for browser capture
# https://carbon.now.sh/?l=python&code=<url-encoded-code>

3. Mermaid Diagrams → PNG

# Using mermaid-cli
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or with Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png

4. SVG → PNG

# Using sharp (Node.js)
node -e "
const sharp = require('sharp');
sharp('input.svg').png().toFile('output.png');
"

# Using Inkscape CLI
inkscape input.svg --export-type=png --export-filename=output.png

# Using ImageMagick
convert input.svg output.png

5. Terminal Output → PNG

# Using termshot (if installed)
termshot -- ls -la

# Manual approach: capture output, wrap in HTML with monospace font, screenshot

Workflow

Determine the content type (code, diagram, HTML, terminal, SVG)
Check which tools are available in the environment (which silicon, npx --help, etc.)
Choose the best method and generate the PNG
Verify the output exists and is non-empty: file output.png && ls -la output.png
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