スライドや投稿用にコードのスクリーンショットを作る方法

コードのスクリーンショットを作るには、コードスクリーンショットジェネレーターを開き、ウィンドウにコードを貼り付けます。「言語」で言語を選ぶと、コードに合った色が使われます。「ファイル名」に名前を入力すると、タイトルバーに表示されます。次に「PNG」をクリックします。画像はブラウザー内で作成されます。

エディターのスクリーンショットには、タブやメニュー、小さな文字も写ります。このツールではコードだけを表示したウィンドウを作成でき、画面上でのサイズの3倍になります。大きなスライドに使っても、文字はくっきり表示されます。

画像の作り方

1. ウィンドウ内をクリックして、コードを貼り付けます。ここに直接入力することもできます。Enterキーを押すと、1つ上の行のインデントが引き継がれます。
2. 「言語」で言語を選びます。初期設定はJavaScriptです。
3. 「ウィンドウスタイル」でウィンドウ枠を選びます。macOS、Windows、なしから選べます。初期設定はmacOSです。
4. retry.pyのようなファイル名を入力します。タイトルバーに表示されます。
5. プレビューの下にある「PNG」をクリックします。

エディターにPythonのリトライ関数が表示され、言語にPythonが選択され、ファイル名にretry.pyが入力されたコードスクリーンショットジェネレーター

ファイルはsnippetの後に番号を付けた名前で保存されます。たとえば、snippet-1792757286543.pngのようになります。まず短いJavaScriptのサンプルを見たい場合は、「サンプルを挿入」をクリックします。

選択できる言語

「言語」リストには25項目あります。

• Web：JavaScript、TypeScript、HTML、CSS。
• プログラミング：Python、Java、Rust、C++、C、Go、PHP、SQL、Shell。
• データと設定：JSON、JSON5、XML、YAML、CSV、INI、TOON、Nginx、Prisma Schema。
• テキスト：Markdown、LaTeX、プレーンテキスト。

言語の設定は色にだけ反映されます。コードやファイル名から自動で判別されないため、自分で選んでください。

色の変更方法

コードの色はサイトのテーマに合わせて変わります。暗い画像にするには、ページ上部のメニューを開き、テーマボタンをクリックして「ダークテーマ」を選びます。白い画像にするには、「ライトテーマ」を選びます。

「タイトルバーの色」を変更するまでは、どちらのテーマでもタイトルバーは暗いままです。タイトル文字は、読みやすい方の白または黒に変わります。「ウィンドウスタイル」を「なし」にするとタイトルバーは表示されず、色の設定項目も無効になります。

フォントと余白は固定です。画像に行番号は表示されません。

幅の設定方法

ウィンドウの幅は、最も長い行に合わせて変わります。右下にある小さな点線のハンドルをドラッグすると、幅を狭くしたり広くしたりできます。長い行は次の行に折り返されます。ウィンドウの幅は最低300ピクセルで、ハンドルは画像に含まれません。

非常に長い行があると、ウィンドウがプレビューからはみ出すことがあります。プレビューの上にあるバーの「リセット」ボタンをクリックすると、枠内に収まるように戻せます。ズームボタンで変わるのはプレビューだけで、ダウンロード画像には影響しません。

形式の選び方

• PNGは角丸の外側が透明になるため、どんな色のスライドにも合わせられます。
• JPGでは、角丸の小さな部分が黒く塗りつぶされます。
• 「印刷」をクリックすると、新しいウィンドウで印刷ダイアログとともに画像が開きます。

どちらの形式も、画面上のウィンドウの3倍のサイズになります。たとえば、幅752ピクセルのウィンドウからは、幅2256ピクセルの画像が作られます。

コードを貼り付け、言語を選んで、スライド用のPNGをダウンロードしましょう。