ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。
Code Screenshot
コード片をブラウザ内で描画し、整った PNG スクリーンショットに。
ハイライトは意図的にシンプルです —— キーワード・文字列・コメントを 1 色ずつ。スクリーンショットはブラウザ内の canvas に描画され、何もアップロードされません。
使い方
- コードをパネルに貼り付けます。
- 言語を選びます —— JavaScript・TypeScript・Python・JSON・HTML・CSS・プレーンテキスト。
- テーマ（ダーク/ライト）とフォントサイズを選び、macOS のウィンドウドットを切り替えます。
- 入力に合わせてプレビューが再描画されます。左には淡い行番号の溝が付きます。
- ダウンロードで canvas を PNG として保存します。
よくある用途
- チケットやチャットでの片段共有 —— プレーンテキストのフェンス付きコードより画像の方が読みやすい。
- スライドとドキュメント —— デッキや README に統一感のあるコード画像を置く。
- コード系の投稿 —— 短い片段に体裁のよいウィンドウ枠を付ける。
- 変更前後の比較 —— 2 つのバージョンを描画して並べる。
よくある質問
Q: ハイライトの精度は？ A: 意図的にシンプルです。キーワード・文字列・コメント・数字を 1 色ずつ。完全なパーサーはないため、文字列内の正規表現やネストした式を含むテンプレートリテラルなどは精密には色づきません。
Q: 使われるフォントは？ A: JetBrains Mono を先頭に、システムの等幅フォントへフォールバックする等幅スタックです。そのフォントがなくても、フォールバックで正常に描画されます。
Q: サイズ制限は？ A: 長い片段も動きますが、canvas は内容に合わせて成長するため、非常に長いファイルは非常に高い画像になります。数百行程度が無理のない範囲です。
Q: 余白や配色は変えられますか？ A: このバージョンではできません。出力の一貫性を保つため余白とパレットは固定で、露出しているのはテーマ・フォントサイズ・ウィンドウドットです。
データはこのデバイス内にとどまります
Code Screenshot は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。