オンラインコード画像生成、複数言語のハイライト対応

コード片を見せるPNGに整える

コード欄に入力した文字列を、色付きのコードカードとしてプレビューし、PNG画像に書き出すツールです。日本語の画面でコードを貼り付け、プログラミング言語とテーマを選ぶと、キーワードや文字列などに構文色が付いた表示になります。言語メニューは色分け規則を選ぶための項目で、コード本文を別の言語へ翻訳するものではありません。

選べる言語は JavaScript、TypeScript、JSX、TSX、Python、Java、Go、Rust、C++、C#、PHP、Ruby、SQL、Bash／シェル、JSON、YAML、HTML／XML、CSS です。コードの内容は選択した言語に沿って色分けされ、行番号を付けることもできます。

カードの色と余白を調整する

テーマはキャンディピンク、オーシャンブルー、サンセットオレンジ、フォレストグリーン、ミッドナイトグレー、バイオレット、ピュアライトグレーの7種類です。外側の背景とコード面の配色が切り替わります。ウィンドウタイトルはカード上部に表示する文字で、空欄にすると表示されません。ウィンドウボタンと行番号はそれぞれ個別に表示・非表示を選べます。

余白は0〜128 pxを4 px刻み、フォントサイズは10〜28 pxを1 px刻みで調整できます。余白を増やすとコードカードの周囲が広がり、フォントサイズを上げると文字を大きく見せられます。プレビューを見ながら、掲載先で読みやすいバランスに整えてください。

文字を含む画像のアクセシビリティ資料

短いコードからPNGを書き出す

たとえば、次の2行をカードにしてみます。

const message = "こんにちは";
console.log(message);

1. コード欄に表示したい部分を入力します。例では JavaScript の2行をそのまま貼り付けます。

2. プログラミング言語で「JavaScript」、テーマで「オーシャンブルー」を選びます。言語を合わせると、対応する構文の色分けがプレビューに反映されます。

3. ウィンドウタイトルに「greeting.js」など短い文字を入れ、余白とフォントサイズを調整します。行番号やウィンドウボタンは必要に応じて切り替えます。

4. プレビューでコードと配色を確認し、「ダウンロード」でPNGを保存します。「コピー」は利用環境が画像クリップボードに対応していれば画像をコピーし、対応していない場合はPNGのダウンロードに切り替わります。

共有前にコードと画像を点検する

出力はコードを画像として見せるためのPNGです。プログラムを実行、コンパイル、構文検証する機能ではなく、色分けも選択した言語に基づく表示です。意図した言語と違う色が付いた場合は、言語メニューを確認してください。

コードは入力時の改行や空白を保って表示され、長い行は自動で折り返されません。プレビューの横幅からはみ出す場合があるため、必要な範囲に絞るか、フォントサイズを調整し、左右が欠けていないことを確認してから保存してください。固定の画像幅・高さを指定する項目はありません。

公開前に、コードやウィンドウタイトルへ API キー、アクセストークン、社内パス、ユーザー名、顧客情報などを含めていないか確認します。入力内容の送信先や保持期間はここで確認できていないため、機密情報を含むコードは入力しないでください。

PNG内のコードは画像上の文字になり、ソースコードとして直接コピー、検索、実行する用途には向きません。記事や資料では、画像の内容を説明する代替テキストを付け、重要なコードはコピーできるテキスト形式でも併記してください。