コード画像ジェネレーター

機能

• シンタックスハイライト：JavaScript・TypeScript・Python・Go・Rust・SQL・Bash・JSON・プレーンテキスト
• 着色はサイト内のハイライターを再利用。「コードハイライト」ツールと規則が一致
• 3 テーマ：ダーク・ライト・ハイコントラスト
• 行番号の表示、文字サイズ・余白・角丸の調整ができます
• ウィンドウのタイトルバーを追加可能（赤黄緑の丸と任意のタイトル）
• 等幅の幅は 1 文字ずつ計測。日本語コメントがずれません
• PNG を出力し、カードに寸法と容量を表示
• すべてブラウザー内で描画。コードはアップロードされません

使い方

1. 「コード」欄に描画したいコードを入れます
2. 言語とテーマを選び、文字サイズ・行番号・余白・角丸を調整します
3. 必要ならタイトルバーを有効にしてタイトルを入力します
4. PNG をダウンロードします

よくある質問

複数行のコードに対応していますか？

描画側は複数行に対応しています（行番号も行の高さも行単位で計算します）が、コード欄は現在1 行の入力欄です。これは当サイトの画像ツールシェルの部品の形で、標準の 1 行テキスト部品は貼り付け時に改行を取り除くため、実際には 1 行ずつになります。1 行のコード、式、短く圧縮したコードに向いています。まとまった複数行が必要なときは、いまは別の方法で描画するか、複数回に分けてください。

着色の規則は「コードハイライト」ツールと同じですか？

同じ実装です。着色はサイト内の lib/highlight.ts を再利用しており、言語表・キーワード表・各区間の分類は 1 か所にしかありません。ここで追加しているのは、その分類結果を canvas に描くことだけです（canvas に innerHTML は無く、HTML をそのまま描けません）。クラス名から色への対応は描画にだけ必要なものです。だからここでの配色は「コードハイライト」ツールと一致し、規則が二重になることはありません。

なぜ幅を 1 文字ずつ測るのですか？

等幅フォントでは日本語の 1 文字が欧文 2 文字分だからです。行全体をまとめて測ると、フォントエンジンが合成する幅が「欧文は半分・日本語は全角」という実際の占有と数ピクセルずれることがあり、行番号の列とコードがずれます。1 文字ずつ測れば幅が予測でき、テストで固定できるので、日本語コメントとコードも揃います。

背景は透明にできますか？

現在の出力はベタ背景です（テーマごとの背景色）。角丸の外側の四隅は透明なので、暗い背景や明るい背景に置いても角丸に白い縁が出ません。別の背景色が必要なときは、いちばん近いテーマを選ぶか、ダウンロード後に画像ツールで背景色を置き換えてください。