コード画像メーカー

コードを色付き画像にしてそのままコピーできます

読み込み中…

このツールは役に立ちましたか？

このツールについて

コードを貼り付けると、構文が色付けされた画像にします。テーマ9種、グラデーションや透明の背景、macOS・Windowsのウィンドウ装飾、行番号や特定行の強調を選べて、できた画像はダウンロードするかクリップボードにそのままコピーしてSlackやブログに貼れます。画面のプレビューがそのまま書き出される画像なので、受け取ってから驚くことがありません。

使い方

  1. コードを貼り付けます。言語は内容とファイル名から自動で判定します。
  2. テーマと背景を選び、余白と文字サイズを調整します。
  3. 強調したい行があれば 3,5-7 のように書きます。
  4. 画像をコピーを押すか、PNGを1x・2x・3xでダウンロードします。

よくある質問

2x、3xとは何ですか?
同じ絵を2倍・3倍の解像度で描きます。Retinaディスプレイや発表スライドのように大きく見る場面では2x以上が向いていて、ブログ本文なら1xでも十分です。文字の大きさはそのままで、画素だけが細かくなります。
画像のコピーができません。
ブラウザが画像のクリップボード書き込みに対応していない場合です。一部のSafariや古いブラウザがこれに当たります。その場合はPNGのダウンロードをお使いください。
日本語のコメントが崩れます。
選んだフォントに日本語が入っていないためです。JetBrains MonoとFira Codeは欧文専用なので、日本語はシステムフォントで代替されます。日本語が多いコードではシステム等幅を選んでください。
設定の共有リンクには何が入りますか?
コードとすべての設定がURLの#以降に載ります。その部分はブラウザがサーバーに送らないためアクセスログには残りませんが、リンク自体にはコードが含まれます。秘密のコードは共有しないでください。
なぜ画面キャプチャではなく直接描くのですか?
画面をキャプチャする方式はブラウザごとに結果が異なり、ウェブフォントの準備前に撮られると書体が丸ごと変わってしまいます。キャンバスに直接描けば、どのブラウザで開いても同じ画像になります。

コードはブラウザ内でのみ処理され、サーバーには送信されません。構文規則とテーマは必要なものだけをその都度取得するため、初めて選ぶ言語やテーマでは少し待つことがあります。

似ているツール