コードを画像に

コードを画像にとは？

コードを画像には、コードスニペットを共有しやすい画像——構文ハイライト付きの整ったコードカード——に変換する無料のブラウザツールです。ブログ記事やスライド、README、SNS 投稿に貼り付けられます。JavaScript・TypeScript・Python・Go・Rust・Java・SQL など 20 以上の言語をハイライトでき、コードから言語を推測する任意の自動判別も備えています。7 種類のテーマ、プリセットのグラデーション、カスタム色やグラデーション、透過背景でカードを飾り、等幅フォント・フォントサイズ・余白・行番号・ウィンドウタイトル・出力幅を細かく調整できます。編集に合わせてカードはリアルタイムに描画され、1x・2x・3x の PNG として書き出す、SVG として保存する、クリップボードにコピーする、のいずれも可能です。

コードを画像にの使い方

1. コードを貼り付けるか入力します。作業空間では他のツールのテキスト出力を入力ポートに接続できます。
2. 合う言語を選ぶか、「設定」で自動判別をオンにしてコードから言語を推測させます。
3. 「設定」でテーマと背景（プリセットのグラデーション、カスタムの単色・グラデーション、または透過）を選びます。
4. 等幅フォント・フォントサイズ・余白・行番号・ウィンドウタイトル・出力幅を好みに合わせて調整します。
5. 編集に合わせてプレビューがその場で更新されます。クリックするとズーム表示で大きく確認できます。
6. カードを 1x〜3x の PNG として書き出す、SVG としてダウンロードする、または画像をクリップボードにコピーします。

使用例

よくある質問

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

JavaScript・TypeScript・JSX/TSX・HTML・CSS・JSON・Python・Bash・Java・C・C++・C#・Go・Rust・Ruby・PHP・SQL・YAML・Markdown・Kotlin・Swift・GraphQL など 20 以上です。ドロップダウンから選ぶか、自動判別をオンにしてコードから言語を推測させます。

何を、どの品質で書き出せますか？

1x・2x・3x のピクセル密度で PNG を書き出す、ベクターの SVG を保存する、または画像をそのままクリップボードにコピーできます。背景を「透過」にすると、PNG はアルファチャンネルを保ち、カードの背後に背景がない状態になります。

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

はい。7 種類のテーマを切り替え、プリセットのグラデーション、カスタムの単色・グラデーション、または透過背景を選び、等幅フォント・フォントサイズ・余白・行番号・編集可能なウィンドウタイトル・出力幅を調整できます。

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

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

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

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