テキスト入力から装飾画像を作るまでの基本フロー
本ツール「コード・スクリーンショット作成」は，入力したソースコードを色分けし，背景とエディタ風の装飾を付けたPNG画像へ変換するブラウザツールです．画面はコードとスタイルを設定するエリアと，仕上がりを確認するプレビューエリアで構成されています．画面が狭い場合は左右ではなく上下に並びます．
利用時は，まずテキストエリアにコードを貼り付けるか直接入力します．続いてプログラミング言語，背景，外側の余白，macOS風ヘッダーの有無，保存名を設定します．各変更は右側のプレビューに反映されるため，色の組み合わせや文字の折り返しを確認してから「画像を生成してダウンロード」を押せます．
主な用途は，技術ブログの挿絵，発表資料，開発メモ，SNS投稿などに，短いコードスニペットを画像として掲載する場面です．コードを実行したり編集履歴を管理したりする開発環境ではなく，表示中のスニペットを装飾付き画像として保存することに特化しています．
10種類の言語選択とシンタックスハイライト
入力コードの色分けにはhighlight.jsを使います．画面で選択できるのは，JavaScript，TypeScript，HTML，CSS，Python，Go，Rust，C++，Java，SQLの10種類です．利用者が選んだ言語の識別子をコード要素に設定し，その言語のハイライト規則で色分けします．
言語はコード内容から自動判定されません．例えばJavaScriptのコードにPythonを選んだ場合，適切な言語へ自動修正するのではなく，Python用の規則で色分けされます．色が意図と異なるときは，まず言語の選択を確認してください．
ハイライトは見た目を整える処理です．入力したコードを実行せず，コンパイル結果も出しません．構文エラー，型エラー，未定義変数等を検出する機能はないため，色が付いたことはコードの正しさを意味しません．作成後の画像は説明・共有用であり，元コードの保存やテストは別に行う必要があります．
背景，余白，macOS風ヘッダーの調整
背景は6種類から選択できます．「Sunset Gold」「Midnight Blue」「Aurora Green」「Cyberpunk Pink」「Space Grey」はそれぞれ異な色のグラデーションです．「Soft Glass」は落ち着いた背景色と枠線を使うスタイルですが，透過PNGを作る「背景なし」の設定ではありません．
コードウィンドウの外側に置く余白は，16pxから80pxまで4px刻みで調整できます．余白を小さくするとコード領域が大きく見え，広げると背景デザインの面積が増えます．画像の実際の使用先にはそれぞれ別の比率やトリミング規則があるため，余白を調整しただけで各SNSに最適化されるわけではありません．
macOS風ヘッダーを表示すると，左側に赤・黄・緑の三つの丸が並び，中央にファイル名風の文字が表示されます．例えば基本名に「app-code」，言語にTypeScriptを選ぶと「app-code.ts」と表示されます．Rustは.rs，Javaは.java，HTMLは.htmlのように，言語ごとの一般的な拡張子を使います．
これは見た目の装飾であり，実際のエディター操作を再現するものではありません．
表示中のプレビューからPNGを生成する仕組み
「画像を生成してダウンロード」を押すと，html-to-imageのtoPng機能が表示中のプレビューDOMを画像化します．ライブラリは対象要素とstyleを複製し，フォントや画像リソースを取り込み，SVGのforeignObjectを経由してCanvasへ描画した後，PNG Data URLを作ります．ブラウザの画面全体をスクリーンショットするのではなく，ツールのプレビュー要素だけが対象です．
出力時のpixelRatioは2に固定されています．基本的には，プレビュー要素の論理サイズに対して縦横それぞれ2倍のCanvasピクセル数で描画します．この設定はラスター画像のピクセル密度を増やすもので，SVGのように無限に拡大できるわけではありません．1倍や4倍を選ぶ画面設定もありません．
保存形式はPNGのみです．PNGは可逆圧縮のラスター画像形式で，JPG，WebP，SVGの出力には対応しません．ダウンロード名は入力した基本名から作り，パス区切りや一部の使えない記号をハイフンへ置き換えます．未入力ならcode.png，sample.pngと入力しても末尾の.pngを重ねずsample.pngにします．画像の縦横ピクセル数を利用者が直接入力する機能はありません．
長いコード，フォント，ブラウザ差に関する制限
長い1行は，プレビューの幅に合わせて折り返すように表示します．そのため，画面幅より長いURL，識別子，コメント等がある場合は，元コードに改行がなくても画像上では複数行になることがあります．プレビューの最大幅は620pxであり，折り返し後の行数によって画像の高さは変わります．
数千行のような極端に大きなコードでは，DOM，Canvas，Data URL，メモリの制約により，生成が失敗したり期待したサイズにならなかったりする可能性があります．コード量は無制限ではありません．全文が必要なときは，プレビューを確認し，複数の画像に分けることも検討してください．
文字の見た目は，ブラウザ，OS，適用されたフォント，フォントの読み込み状況に影響されます．画像生成前にブラウザのフォント読み込み完了を待ちますが，フォント取得の失敗，CORS，端末側の描画差まで無くすことはできません．どの環境でも完全に同じピクセル結果になるとは限らないため，保存前のプレビューとダウンロード後のPNGを確認してください．
本ツールには，行番号，特定行の強調，フォント選択，コードテーマ選択，透過背景，SNSごとの画像サイズプリセット，画像のクリップボードコピーはありません．必要な見た目がプレビューの調整範囲に収まるかを確認して利用してください．
ブラウザ側の処理範囲と公開画像の情報管理
シンタックスハイライトとPNGへの変換ロジックは，利用者のブラウザ側で実行されます．入力コードを画像化するための専用サーバーAPIは使っていません．ただし，html-to-imageは表示の再現のためにフォントや画像リソースを取得・埋め込みする場合があり，ページ表示，広告，解析，サイト共通機能，ブラウザ拡張等の通信と動作も別に考える必要があります．
サイト全体が完全にオフラインであることや，一切通信しないことを意味しません．
入力内容や背景設定をlocalStorageへ自動保存する機能，サーバーに履歴を保存する機能，アカウント間で同期する機能はありません．再読み込みやページを閉じる前に，必要な元コードはエディター等に保存し，必要なPNGはダウンロードしてください．コード画像は元ソースのバックアップにはなりません．
画像を公開する前には，コード内の秘密鍵，APIアクセストークン，データベース接続情報，パスワード，個人情報を確認してください．本ツールには機密情報を検出して自動的に隠す機能がありません．変換がブラウザ側で行われることと，作成した画像を安全に公開できることは別です．共有範囲と画像に含まれる情報を目視で確認した上で利用してください．