コードを画像に変換（コードスクリーンショット生成）

スライド、ブログ記事、SNSでコードのスニペットを共有するには、スクリーンショットが最も分かりやすい方法であることが多いのですが、実際のスクリーンショットにはエディターの余計な部分が写り込みます。このツールはコードそのものを描画します。JavaScript/TypeScript、Python、Java/C/C#、Go、Rust、PHP、SQL、HTML、CSS、JSON、シェルの構文ハイライト、ライト・ダーク・セピアのテーマ、タイトルつきのウィンドウ枠、行番号、グラデーション・単色・透明の背景に対応しています。2倍または3倍の鮮明なPNG、またはSVGでダウンロードできます。

使い方

1. コードを貼り付け、言語を選びます。
2. テーマと背景を選びます。
3. ウィンドウのタイトル、枠、行番号を設定します。
4. フォントサイズ、余白、倍率を調整します。
5. PNGまたはSVGをダウンロードします。

計算式

高さ = 2 × 余白 + タイトルバー + 2 × 内側の余白 + 行数 × 1.5 × フォントサイズ

各文字は固定の等幅グリッドに置かれる（東アジアの全角文字と絵文字は2セル分）ため、システムのフォントに関係なく列がそろいます。タブは空白4つになります。ハイライトは、コメント、文字列、数値、キーワード、関数名、型を判別する軽量な字句解析器によるもので、完全なパーサーではないため、特殊な構文には色が付かないことがあります。倍率は高解像度画面向けにすべてのピクセル寸法を掛け算します。

計算例

8行のdebounce関数を、16 pxのフォントと48 pxの余白で作ると、1倍では高さが48 + 36（タイトルバー）+ 20 + 8 × 24 + 20 + 48 = 364 px、既定の2倍では728 pxになります。function、return、letなどのキーワード、コメント、既定値300、setTimeoutの呼び出しは、ダークテーマでそれぞれ別の色になります。