コードのスクリーンショット
コードをシンタックスハイライト付きのきれいな画像にします
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
プレビュー
プレビューの行をクリックするとハイライトできます。
ハイライターを読み込み中…
コードのスクリーンショットの使い方
コードをシンタックスハイライト付きの画像にし、ウィンドウ枠・テーマ・背景を付けて PNG・SVG で保存またはコピーします。27 言語とプレーンテキストに対応し、言語は自動で判定します。処理はブラウザ内です。
- 1
「コード」欄にコードを貼り付けるか、「サンプル」をクリックして例を表示します。
- 2
「言語」は「自動判定」のままにするか手動で選び、「タイトル」にファイル名などを入力します。
- 3
「ハイライトする行」に 3, 5-7 のように行を指定するか、プレビューの行をクリックします。必要なら「ほかの行を薄くする」をオンにします。
- 4
「外観」と「背景」で「テーマ」、「ウィンドウ」（macOS、Windows、なし）、文字サイズ、グラデーションか単色の背景、余白を選びます。
- 5
「書き出し」で「幅」と「解像度」を設定し、「PNG をダウンロード」、SVG、「画像をコピー」のいずれかをクリックします。
よくある質問
コードはどこかに送信されますか？
いいえ。ハイライトも描画もブラウザ内で行います。ただし前回のコードと設定はこのブラウザのローカルストレージに保存されるので、共用のパソコンでは使い終わったら「クリア」を押してください。
対応している言語とテーマは？
JavaScript、TypeScript、Python、Java、Go、Rust、C、C++、C#、PHP、Ruby、Swift、Kotlin、Dart、Scala、Lua、SQL、Shell、PowerShell、JSON、YAML、HTML / XML、CSS、SCSS、Markdown、Dockerfile、Diff とプレーンテキストです。テーマは One Dark、GitHub Dark、GitHub Light、Dracula、Nord、Monokai、Solarized Dark、Solarized Light です。
PNG と SVG の違いは何ですか？
PNG は 1×・2×・3× の解像度で書き出す画像です。SVG はコードを選択できるテキストのまま残し、拡大してもぼやけませんが、開いた端末にインストールされたフォントで表示されます。
長い行のせいで画像が横に広がりすぎるときは？
「幅」を「固定」にし、「画像の幅」に 320〜4000 px の値を入力します。長い行はその幅で折り返されます。
背景を透明にできますか？
はい。「背景」で「透明」を選び、PNG か SVG でダウンロードしてください。
「デバイスモックアップ」とはどう違いますか？
このツールは貼り付けたコードをテキストとして組版して描画します。アプリや Web サイトの既存のスクリーンショットに枠を付けたい場合は「デバイスモックアップ」を使ってください。