Code snapshot はコードスニペットをウィンドウ装飾・シンタックスハイライト・グラデーションキャンバス付きの PNG 画像にレンダリングするツールです。コードを貼り付けて言語とテーマを選び、そのまま公開できる画像をダウンロードできます。ray.so をベースに構築されており、手動スクリーンショットが見た目のばらつきを招く技術ブログ・SNS 投稿・プレゼンスライドに適しています。
背景パディングと調整のタイミング
パディングはコードウィンドウ周囲のグラデーションキャンバスの幅を制御します（スライダー 0〜100 px；内部レンジは最大 200 px）。モバイルのデフォルトは 32 px、デスクトップは 64 px です。
- 技術ドキュメントや GitHub README：16〜32 px でコンパクトに
- SNS カバー画像やカード：48〜80 px でゆとりのある見た目に
透明背景をオンにするとグラデーションキャンバスを完全に除去し、コードウィンドウだけを書き出します。Figma への埋め込みやカスタム背景への合成に便利です。ただし一部のプラットフォーム（WeChat 記事・Feishu ドキュメントなど）はアップロード時に透明 PNG を白く塗りつぶします。そういった配信先では透明背景をオフにして書き出してください。
画像幅と解像度
幅は最長行から自動推定されます（文字数 × フォントサイズ × 0.62 + 160）。最小 280 px・最大 1,600 px（デフォルト 960 px）でキャップされます。Retina ディスプレイでは書き出しピクセル数が表示幅の 2 倍になるため、960 px 表示幅の場合は 1,920 px 幅の PNG が生成され、高解像度配信に十分な品質が得られます。
画像映えするコード
- 10〜40 行
- 1 行 80 文字以内
- 単一の関数や要点に絞ったスニペット
- 不要なコメントや空行を削除済み
よくある問題
- 言語の選択ミスでシンタックスカラーが無効になる
- 最大幅を超える行はテキスト折り返しが発生する
- 透明背景がプラットフォームによって白く塗られる
- パディング 0 にするとグラデーション装飾が消える
機密コードの安全な取り扱い
レンダリングと書き出しはすべてブラウザ内で完結し、コードはどのサーバーにも送信されません。それでも、スナップショットを撮る前に本物の API キーやパスワードをプレースホルダー（例：YOUR_API_KEY）に置き換えることを推奨します。公開された画像は検索エンジンにインデックスされる可能性があり、簡単には取り消せません。