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. コード → PNG（Carbon または Silicon を使用）

スタイル付きのコードスクリーンショットを作成する場合：

# 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 以上）を設けたダークテーマを使用すると、洗練された見た目になります
• Retina 品質の出力には、Playwright/Puppeteer で deviceScaleFactor: 2 を設定します
• 透明な背景にするには、--background transparent または omitBackground: true を使用します
• 専用ツールがインストールされていない場合は、HTML とヘッドレスブラウザーを組み合わせる方法を代わりに使用します。あらゆる用途に使えます