読みやすい画像としてコードを共有
コードを貼り付けるだけで、整った画像が作れます。エディタテーマでシンタックスハイライトし、macOSまたはWindowsのウィンドウで囲み、グラデーションや単色の背景に配置します。ツイート、スライド、ブログ記事、ドキュメントで読みやすい画像です。描画はブラウザ内で行われるため、コードがアップロードされることはありません。
コードを画像にする方法
- 1コードを貼り付けるか入力します。言語は自動で検出されますが、自分で選ぶこともできます。
- 2テーマ、フォント、サイズ、行の高さを選び、必要なら行番号をオンにします。
- 3ウィンドウ（macOS、Windows、なし）を選び、タイトルとしてファイル名を付けます。
- 4グラデーション、単色、透明から背景を選び、ウィンドウ周りの余白の量を決めます。
- 5PNG、JPEG、WebP（1×〜4×）またはSVGでダウンロードするか、画像をクリップボードに直接コピーします。
どのサイズでもくっきり
画像は既定で2×で書き出されるため、高解像度の画面やスライドでもくっきり表示されます。印刷や非常に大きなディスプレイ向けには4×まで上げられます。
SVGはコードを本物のテキストとして保持します。無制限に拡大でき、ファイルも小さいままですが、開いた人の環境のフォントで描画されます。
言語とテーマ
- 言語
- JavaScript、TypeScript、Python、Java、C、C++、C#、Go、Rust、PHP、Ruby、Swift、Kotlin、Dart、SQL、Bash、PowerShell、HTML、CSS、SCSS、JSON、YAML、Markdown、Dockerfile、Lua、R、プレーンテキスト。
- テーマ
- Dracula、One Dark、GitHub Dark、GitHub Light、Monokai、Nord、Night Owl、Solarized Light。
コードは端末から出ません
ハイライトと描画はブラウザ内で行われるため、非公開や未リリースのコードも安心して貼り付けられます。アカウント登録も透かしもありません。
先にコードを整えたい場合はコード圧縮・整形ツールを、画像をデバイスに配置したい場合はデバイスモックアップ作成ツールを使ってください。
よくある質問
- Carbonのようなツールですか？
- はい。同じ種類の画像、つまり背景の上のウィンドウにハイライトされたコードを表示した画像を作れます。すべてブラウザ内で動作し、コードはアップロードされません。
- 背景を透明にできますか？
- はい。背景で「なし」を選び、PNG、WebP、SVGで書き出してください。JPEGは透明に対応していないため、白で塗りつぶされます。
- 別のパソコンでSVGの見た目が少し違うのはなぜですか？
- SVGのテキストは、開いた環境にインストールされているフォントで描画されます。選んだフォントがない場合は、似た等幅フォントで代用されます。PNG、JPEG、WebPはどこでも同じ見た目です。
- 使えるコードの量に上限はありますか？
- 決まった上限はありませんが、非常に長いコードや横幅の広いコードは非常に大きな画像になり、高い倍率では作成できないブラウザもあります。書き出しに失敗したら、倍率を下げるかコードを短くしてください。
- コードはアップロードされますか？
- いいえ。コードのハイライトと描画はブラウザ内で行われ、お使いの端末から出ることはありません。