mcpField
E
exporting-to-png

exporting-to-png

github.com/revitalb-port创意与媒体062 次安装10 周前更新
代码仓库

关于 exporting-to-png

一项将代码、Markdown、终端输出、图表和渲染界面转换为 PNG 图片的技能，并根据内容选择渲染或转换工具。

主要功能

  1. 01使用无头浏览器截取 HTML
  2. 02生成样式化代码截图
  3. 03转换 Mermaid 图表
  4. 04转换 SVG 和终端输出
  5. 05验证并报告输出文件

适用场景

  1. 01将格式化代码片段保存为图片
  2. 02把 Mermaid 图表导出为 PNG
  3. 03截取终端输出以供分享

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill exporting-to-png

安装后在 Claude Code 中输入/exporting-to-png确认已加载。

详细介绍

导出为 PNG

将代码片段、Markdown 内容、终端输出、图表或渲染后的 UI 组件转换为 PNG 图像文件。

方法

1. 通过无头浏览器将 HTML 转换为 PNG

最灵活的方法。将任意内容渲染为 HTML 并截图。

# 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();
})();
"

步骤：

  1. 生成一个 HTML 文件，并为内容设置合适的样式（语法高亮、内边距、字体）
  2. 使用无头浏览器进行渲染和截图
  3. 如有需要，使用图像工具裁剪
2. 使用 Carbon 或 Silicon 将代码转换为 PNG

用于生成带样式的代码截图：

# 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 图表转换为 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. 将终端输出转换为 PNG
# Using termshot (if installed)
termshot -- ls -la

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

工作流

  1. 确定内容类型（代码、图表、HTML、终端、SVG）
  2. 检查环境中有哪些可用工具（which silicon、npx --help 等）
  3. 选择最佳方法并生成 PNG
  4. 验证输出文件存在且非空：file output.png && ls -la output.png
  5. 报告文件路径和尺寸

提示

  • 生成代码截图时，使用深色主题并留出充足的内边距（32px 以上），以获得精致的效果
  • 在 Playwright/Puppeteer 中将 deviceScaleFactor: 2 设为视网膜级输出
  • 对于透明背景，使用 --background transparent 或 omitBackground: true
  • 如果没有安装专用工具，请使用 HTML + 无头浏览器方法作为备用方案——它适用于所有内容

评论

支持 Markdown