コードを貼り付けるだけで、きれいな画像にできます。シンタックスハイライト、6つのテーマ、グラデーションの背景、ウィンドウ枠、行番号、SNS向けのサイズに対応。くっきりした2倍のPNGかSVGで書き出せます。無料で、ブラウザー内で動作します。
コード画像とは、シンタックスハイライト、余白、背景を付けたコードスニペットの画像で、本物のコードブロックが使えないスライド、投稿、ドキュメント向けに作るものです。下にコードを貼り付け、言語、テーマ、背景を選び、1200×675などのサイズを指定して、くっきりしたPNGかSVGをダウンロードしましょう。
サイズのプリセット
コードを貼り付けるか入力すると、プレビューがその場で更新されます。言語は自動で判別されますが、9つの中から選ぶこともできます。PNGファイルは、高精細な画面でも文字がくっきり見えるよう2倍のサイズで書き出されます。
いいえ。ハイライトと画像の書き出しはブラウザー内で行われます。サーバーには何も送信されないので、非公開のコードにも安心して使えます。
高解像度のスマートフォンやノートパソコンの画面でも文字がくっきり見えるよう、2倍のピクセル密度で書き出しているからです。選んだサイズで表示すると、CSSの1ピクセルの裏に画像の4ピクセルがある状態になります。
SVGはコードをベクター画像の中のテキストとして保持するため、どんなサイズにも拡大縮小でき、一部のビューアーではテキストを選択することもできます。表示する側の等幅フォントを使うので、別のパソコンではPNGと少し違って見えることがあります。
キーワード、文字列、数値、コメント、関数、タグ、属性に色を付ける軽量なトークナイザーです。画像の中でスニペットを読みやすくするには、これで十分です。完全なパーサーではないため、珍しい構文は普通のテキストとして色付けされることがあります。
ミッドナイト
エンバー
フォレスト
バイオレットナイト
ペーパー
サンド
スカイ
サンセット
ミント
スレート
ピーチ
なし
自動
1200×675
1080×1080
1080×1350
コード
言語
自動判別（{lang}）
サイズ
余白：{n}px
フォントサイズ：{n}px
ファイル名
ウィンドウバー
行番号
テーマ
背景
{lang}のコード画像のプレビュー
{w}×{h} px（PNGは{w2}×{h2}で書き出し）
PNGをダウンロード
SVGをダウンロード
無料で始める · クレジットカード不要