メインコンテンツへスキップ
コード→画像

コードを画像にする

コードを貼り付けて、テーマと背景を選ぶだけ。SNSの投稿、スライド、ドキュメント、不具合報告に使える、くっきりした画像をコピーできます。

入力196文字・8行
結果

スタイル

テーマ
背景
余白
サイズ
表示
行を強調
ほかの行は薄く表示されます
PNGのサイズ
くわしく知る

コードの画像のすべて

コードを画像で共有する理由

SNSやスライドでは、テキストのコードはインデントも色も失われてしまいます。画像なら書いたとおりのレイアウトを保ち、目も引きます。コピーしてもらう必要があるものなら、共有リンクやテキストのコードと組み合わせましょう。

正確なシンタックスハイライト

各言語は、それぞれの文法でハイライトされます。キーワード、文字列、数値、コメント、関数、型に、テーマの別々の色が付きます。数行の典型的なコードなら自動判別でうまくいきますが、短いコードやどちらとも取れるコードは、言語を自分で選びましょう。

アクセシブルなコード画像に

コードの画像は、スクリーンリーダーで読み上げることもコピーすることもできません。投稿するときは、テキストのコードやリンクを添え、コントラストの十分なテーマを使いましょう。印刷するドキュメントには、明るい「Paper」テーマがいちばん向いています。

使い方

コードを画像にする方法

  1. コードを貼り付ける

    コードを入力するか貼り付けるか、ソースファイルを読み込みます。タイトルバーにファイル名を入れることもできます。

  2. 見た目を整える

    言語(自動判別も可)、テーマ、背景、余白、文字サイズ、ウィンドウ枠、行番号を選びます。

  3. コピーまたはダウンロード

    画像をコピーして投稿やチャットにそのまま貼り付けるか、PNGでダウンロードするか、もう一度開ける共有リンクを送ります。

活用ガイド

コツとガイド

どの画面でも読みやすく

コードは10〜20行程度に短く、1行は80文字くらいまでに。ほとんどのタイムラインでは、画像がスマホの幅まで縮小されるからです。

SNSの投稿なら、大きめの文字と中くらいの余白がいちばん読みやすくなります。スライドやレビューで特定の行について話すなら、行番号が便利です。

プロのコツ

コードは外部に出ません

何もアップロードされません。ハイライトも描画もブラウザ内で行われるので、非公開のリポジトリのコードも画像にできます。

共有リンクはコードをリンクの中(#以降)に含め、当サイトのサーバーには保存しません。

プライバシー
よくある質問

よくある質問

コードの画像化について知っておきたいこと