開発
コード画像メーカー
コードを日本語対応の画像に。配色・背景・行番号を調整してPNG・SVG保存。
コードと画像はブラウザ内で処理します。見た目の設定だけをブラウザへ保存し、コードは自動保存しません。共有URLを作るとコードがURLに含まれ、URLを知る人が内容を確認できます。
日本語コメントも、そのまま画像に
日本語に対応する等幅フォントを同梱。構文の色分け、5つのテーマ、背景、余白、行番号とファイル名を組み合わせて、ブログ・スライド・SNS用の画像を作れます。
PNGと、フォントを含むSVG
PNGは1〜3倍の解像度で保存。SVGは日本語フォントを含み、拡大して使えます。フォントを含むぶん容量が大きくなるため、SNSへの投稿やSVG内のフォントに対応しないアプリではPNGを使用してください。
使い方と、きれいに仕上げるコツ
コードを貼り付けるとプレビューを更新します。言語の自動判定が意図と違う場合は手動で選んでください。ファイル名は表示用のラベルで、コードの内容や言語は変更しません。
長いコードは短い単位に分けると読みやすくなります。長い行は折り返しますが、行番号は元の行番号を維持します。タブは4桁幅へ展開します。透明背景でもコード部分のテーマ色は保持します。
JavaScript／CSS整形・SQL整形・HTML整形・XML整形の「画像にする」から、コードを受け渡すこともできます。
共有・設定保存とデータの扱い
入力したコードとファイルはブラウザ内で処理し、画像生成のためにサーバーや外部APIへ送りません。フォントと構文ハイライトもこのサイトに同梱しています。見た目の設定だけをlocalStorageへ保存し、コード本体は自動保存しません。
「共有URLを作成」を押した場合だけ、コードと設定を圧縮してURLの # 以降へ含めます。暗号化ではありません。URLを知る人はコードを復元できます。長すぎるURLは作成できないため、画像保存をご利用ください。開いたページでは読み込み時に共有部分をアドレス欄から外しますが、すでに共有したURLやメッセージは削除されません。
整形ツールの「画像にする」を押した場合は、同じタブのsessionStorageへ一時保持し、移動先で読み出す際に削除します。受け渡しの有効期限は5分です。通常の入力・画像保存でコードを保存することはありません。
仕様・上限と出力の注意
入力はUTF-8で50 KiB・500行まで。文字サイズは12〜28px、画像の幅は480〜1,600pxです。画像の各辺は8,192px、PNGは3,200万画素を上限とし、出力できない場合はエラーで案内します。入力を黙って切り捨てません。
一般的な日本語・英数字に対応しますが、絵文字・異体字・特殊記号など、フォントにない文字は代替表示になる場合があります。構文ハイライトは読みやすくするための表示で、コードの動作や文法の正しさを検証する機能ではありません。生成画像・共有URLには入力した内容が含まれます。
コード画像メーカーの使い方
- コードを貼り付けるか、コード整形画面の「画像にする」から受け渡します。
- 言語・配色・背景・余白・行番号などを選び、プレビューを確認します。
- PNG・SVGで保存するか画像をコピーします。共有する場合はURLに含まれるコードを確認してください。