コードを画像に

類似ツール：CSS とデザイン

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

グラスモーフィズム効果をリアルタイムでプレビューし、ワンクリックで CSS コードをコピー

?

まだコメントはありません。最初のコメントを書いてみましょう！

コードスニペットを、きれいにレイアウトされた共有用の画像に変換します。言語、テーマ、ウィンドウスタイル、背景を選んでPNGをダウンロードでき、スライド、ドキュメント、SNSにそのまま使えます。

コードを下の入力欄に貼り付け、上部の「言語」で対応する言語（JavaScript / TypeScript / Python / CSS / HTML / JSON / Bash / SQL / Rust / Go）を選びます。キーワード、文字列、コメントは自動で色分けされます。
「テーマ」は6種類の配色から選べます：Dracula（濃い紫）、One Dark（グレーがかった黒）、GitHub Light（白背景）、Solarized（濃い青）、Nord（北欧風の寒色）、Monokai（定番の黄緑）。それぞれ個性のある配色です。
「ウィンドウスタイル」で macOS を選ぶと赤・黄・緑の3つのボタンが表示され、実際のエディターらしい見た目になります。「行番号」は個別に切り替えられます。
「余白」スライダー（16〜80px）でコードブロックと背景グラデーションの間の余白を調整します。「背景」は5種類のグラデーションまたは透明（背景なし）から選べます。
プレビューに満足したら、右上の「PNGをダウンロード」をクリックすると 2× の高解像度画像が得られ、Twitter／LinkedIn／技術記事への掲載に最適です。「コードをコピー」はプレーンテキストをコピーします。

コードのスクリーンショットはどの言語に対応していますか？

JavaScript、TypeScript、Python、HTML、CSS、JSON、SQL、Bash、Java、Go などのシンタックスハイライトに対応しています。

書き出したスクリーンショットの形式は何ですか？

PNG形式（2×の高解像度）で、ブログ、プレゼン、SNSでの共有に適しています。

背景色やウィンドウスタイルはカスタマイズできますか？

はい。複数のカラーテーマ、macOS／枠なしのウィンドウスタイル、背景色／グラデーション、行番号、余白などを設定できます。