FIRST CHTools

FIRST CH TOOLS / 画像 / 79 CODE IMAGE

コード画像化

貼り付けたコードを、色付け・ウィンドウ風の枠・余白・角丸・影・背景つきのPNG画像にします。ブログ・SNS・スライドにコードを見せたいときに、そのまま貼れる画像が作れます。和文のコメントも位置がずれません。処理はすべてお使いの端末内で完結します。

コード

背景

形

書き出し

How to Use

  1. コードを貼る入力欄にコードを貼り付けるか、「ファイルを開く」・ドラッグ&ドロップでテキストファイルを読み込みます。言語は自動で判定し、外れたときは一覧から選び直せます。
  2. 見た目を整える配色（ダーク／ライト）・文字サイズ・行番号を決め、背景の色見本と余白・角丸・影を調整します。貼る先が決まっているなら比率（16:9・1:1 など）も合わせます。
  3. 書き出す「PNGで保存」でダウンロード、「画像をコピー」でクリップボードへ。Slack・X・Googleスライドへはそのまま貼り付けられます。

About This Tool

記事やSNSでコードを見せるとき、スクリーンショットではエディタの余計な部分まで写り、文字のサイズもそろいません。本ツールは貼り付けたコードを文字のまま描き直して、背景・余白・ウィンドウ風の枠を付けた画像にします。タイトルバーにはファイル名を入れられ（空欄にもできます）、行番号の有無、80桁などでの折り返しも選べます。コピーした範囲が字下げの途中から始まっていても、「共通の字下げを除く」で左端にそろえます。

色付けには、Marp Markdown→スライドと同じく同梱の highlight.js を使います。この部品は約600KBあるため、最初の見本は色付け済みの状態で持っておき、コードか言語を変えたときに初めて読み込みます（2回目以降はブラウザのキャッシュから読みます）。自動判定はよく使われる24言語から選ぶので、短いコードで外れたときは言語を指定してください。文字は等幅の IBM Plex Mono で描き、和文はお使いの端末の日本語フォントで補います。色の切れ目ごとに実際の幅を測って並べるため、全角のコメントが入っても後ろの文字の位置がずれません。

描画はブラウザのCanvasで行い、コードが外部サーバーへ送信されることはありません。背景・影・比率合わせはスクリーンショット枠装飾と同じ処理なので、画面のスクショと並べても見た目がそろいます。書き出したPNGを軽くするなら 画像→WebP一括変換、コードの変更点を見比べるなら テキスト・コード差分チェッカー が使えます。

見た目の設定はURLパラメータでも渡せます（コードは手元で貼り付けます）。例: /code-image/?lang=python&theme=light&fs=16&ln=1&title=main.py&bg=gradient&c1=%231f2a44&c2=%234b6cb7&ratio=16:9（lang=auto,none,javascript,python など / theme=dark,light / fs=10〜28 / ln=1,0（行番号） / dedent=1,0 / wrap=0,40,60,80,100 / frame=window,none / title=ファイル名 / bg=gradient,solid,none / c1・c2=色 / angle=角度 / pad・radius=px / shadow=0〜100 / ratio=auto,16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=1,2,3）。

Other Tools