コードを画像に

コードを画像にとは？

コードを画像には、コードスニペットを共有しやすい画像——構文ハイライト付きの整ったコードカード——に変換する無料のブラウザツールです。ブログ記事やスライド、README、SNS 投稿に貼り付けられます。素のスクリーンショットではなく、見栄えよくコードを見せたい開発者やテクニカルライター、講師に人気です。JavaScript・TypeScript・JSX・CSS・HTML・JSON・Python・Bash のハイライトから選び、テーマやグラデーション／単色の背景、好みの余白でカードを仕上げます。編集に合わせてカードはリアルタイムに描画され、「PNG をダウンロード」ボタン一つで 2 倍解像度で書き出せます。

コードを画像にの使い方

1. エディターにコードを貼り付けるか入力します。作業空間では、他のツールのテキスト出力を入力ポートに接続することもできます。
2. 言語（JavaScript・TypeScript・JSX・CSS・HTML・JSON・Python・Bash）から、スニペットに合うものを選んで正しくハイライトします。
3. 「設定」を開いてテーマ（Midnight・Graphite・Snow）、背景（Aurora・Sunset・Ocean・Slate・透過）、余白（コンパクト・標準・ゆったり）を選びます。
4. 入力やオプション変更に合わせてプレビューがその場で更新されます。クリックするとズーム表示で大きく確認できます。
5. 「PNG をダウンロード」を押すと高解像度の画像として保存できます。作業空間では PNG を下流の画像ツールへそのまま渡せます。

使用例

よくある質問

どの言語をハイライトできますか？

JavaScript・TypeScript・JSX・CSS・HTML・JSON・Python・Bash をハイライトできます。言語ドロップダウンからスニペットに合うものを選んでください。判別できないトークンは基本の文字色にフォールバックします。

どの画像形式で書き出されますか？

鮮明さのため 2 倍のピクセル密度で PNG を書き出します。背景を「透過」にすると、PNG はアルファチャンネルを保ち、コードカードの背後に背景がない状態になります。

カードの見た目は変えられますか？

はい。「設定」で Midnight・Graphite・Snow のテーマを切り替え、Aurora・Sunset・Ocean・Slate・透過の背景を選び、コード周りの余白をコンパクト・標準・ゆったりに設定できます。

コードはどこかにアップロードされますか？

いいえ。構文ハイライト（Prism）も画像化（html-to-image）も、すべてお使いのブラウザ内で 100% クライアントサイドで実行されます。コードがアップロードされたり、当社のサーバーに送信されたり、共有されたりすることは一切ないため、社外秘のスニペットでも端末の外に出ません。

ツールページでダウンロードを押すまで画像が出ないのはなぜですか？

単体ページでは「PNG をダウンロード」を押したときに PNG を生成するため、入力のたびに画像を取り直すことはありません。スタイル付きのプレビューは編集に合わせてその場で更新されます。作業空間では PNG も自動で再生成され、次のツールへ流せます。