Code Screenshot Generator

シンタックスハイライト付きのコードスクリーンショットを生成し、SVG、PNG、JPEG、WebP、HTML として書き出します。

コード
画像にしたいスニペットを貼り付けます。
構文
ハイライト、言語検出、カラーテーマを選びます。
レンダリング
背景
コードカードの背後にあるキャンバスを設定します。
背景モード
ウィンドウ
フレームのコントロールと行番号の扱いを選びます。
ウィンドウスタイル
レイアウト
余白、文字サイズ、角丸、タブ幅を調整します。

Code Screenshot Generator

できること

Code Screenshot Generator は、貼り付けたスニペットを洗練されたコードカードに変換し、SVG、PNG、JPEG、WebP、または単独で使える HTML として書き出せます。ブラウザー内で動作し、選択可能なテーマでシンタックスハイライトを適用し、ダウンロード前にフレームを調整できます。

使いどころ

プレーンテキストよりもスタイル付きスニペットの方が読み取りやすい、ドキュメント画像、リリースノート、ブログ記事、プレゼンテーション、ソーシャルプレビュー、バグレポートに使えます。SVG と HTML の書き出しはドキュメントでも鮮明に保たれ、PNG、JPEG、WebP はラスター画像を前提とするツールに便利です。

きれいに書き出す方法

最も近い言語を選ぶか、言語検出を自動のままにしてから、使用先に十分なコントラストを持つテーマを選びます。議論の中でスニペットを参照する場合は行番号をオンにし、別のデザインで使う透明な素材が必要な場合は外側の背景を無効にします。

プライバシーと制限

スニペットはページ内でローカルに処理され、このツールによってアップロードされることはありません。非常に大きなファイルではハイライトやラスター書き出しが遅くなることがあるため、書き出す前に表示したい行だけにスニペットを絞ってください。