コード画像変換
シンタックスハイライト付きで、コードを共有可能な美しい画像に変換します。
なぜコード→画像を使うのか?
コード画像は、ソーシャルメディア共有(Twitter/X、LinkedIn)、ドキュメンテーション、プレゼンテーション、フォーマットされたコードレンダリングが利用できないチュートリアルに最適です。シンタックスハイライトを保持し、すべてのプラットフォームで美しく表示されます。
仕組み
- コードを貼り付け: JavaScript、Python、CSS、SQL、シェルコマンド、その他の言語のスニペットを入力します。
- テーマを選択: ハイライト用のライト、ダーク、または高コントラストテーマを選択します。
- フレームをカスタマイズ: ウィンドウスタイル(macOS/Windows/最小)、背景色またはグラデーション、内部余白、フォントサイズを定義します。
- エクスポート: PNGまたはSVGでダウンロード, Twitter/X、LinkedInでの共有や、記事への埋め込みに最適です。
なぜコードを画像に変換するのか?
コードをスクリーンショットで共有することは、プレーンテキストを貼り付けるよりもはるかに魅力的です, シンタックスハイライトを保持し、ソーシャルメディアで一目で読みやすくなります。コード画像は、Twitter/X、LinkedIn、Instagram、YouTubeのサムネイルで開発者、技術トレーナー、コンテンツクリエイターによって広く使用されています。Carbon(carbon.now.sh)などのツールがこの形式を普及させました。このブラウザ側のバージョンは、コードを外部サーバーに送信することなく美しいキャプチャを生成し、すべての一般的な言語を正確なハイライトとカスタマイズ可能なウィンドウスタイルでサポートします。
カスタマイズオプション
- ウィンドウスタイル, macOSの「信号機」ボタン、Windowsコントロール、またはミニマル
- ハイライトテーマ, Dracula、One Dark、GitHub Light、Monokaiなど
- 背景, 単色、グラデーション、または透明
- フォント, JetBrains Mono、Fira Code、Inconsolataなど
- 余白とスケール, 異なるソーシャルメディア形式向け
コード・トゥ・イメージツールとは?
コード・トゥ・イメージツールは、ソースコードの一部を取り、シンタックスハイライトを適用し、スタイル付きウィンドウフレームで包み、ソーシャルメディアで共有したり、スライドデッキに貼り付けたり、ブログ投稿のヒーローに埋め込んだりする準備ができたPNG (またはJPG、WebP) としてエクスポートします。結果は、美しいコードエディタから撮影されたスクリーンショットのように読めますが、レイアウト、テーマ、フレームは再現可能で、解像度は必要なアスペクト比に対してピクセルパーフェクトです。
シンタックスハイライトは、キーワード (if、function、return) が1つの色を取得し、文字列が別の色を取得し、コメントが暗くなる、といった視覚的なスタイルです。うまく行われれば、コードをミリ秒でスキャン可能にします。プレーンテキストで行われると、同じスニペットは等幅グレーの壁のように読めます。古典的なMonokaiダークテーマ、GitHub Dark、Draculaは、ソーシャルメディアで最も共有されています。なぜなら、それらのコントラストが画像圧縮を生き残るからです。
このツールは、言語検出のためのhighlight.jsとスタイル付きDOMをダウンロード可能な画像にラスタライズするためのhtml2canvasを使用して、完全にあなたのブラウザで実行されます。あなたのコードは決してページを離れません。出力PNGは、任意のツイート、LinkedIn投稿、Notionドキュメント、またはデザインキャンバスにドラッグでき、html2canvasがデバイスのピクセル比でレンダリングするため、鮮明なままです。
ツールの中身
左の列はコントロールパネルです: コードのためのテキストエリア、16の人気のあるオプション (JavaScript、TypeScript、Python、HTML、CSS、JSON、Bash、SQL、Java、C#、PHP、Ruby、Go、Rust、XML、YAML) を持つ言語ドロップダウン、テーマピッカー (Dark Monokai、Light、GitHub Dark) 、5つのグラデーションと3つの単色を持つ背景ピッカー、加えてパディングとフォントサイズのスライダー。
2つのチェックボックスは、macOSスタイルのウィンドウドット (フレームの上部にある赤、黄、緑の信号機) と行番号を切り替えます。ドットは純粋な装飾ですが、画像をプレーンテキストの貼り付けではなくコードエディタのスクリーンショットとして読み取らせます。行番号は、チュートリアルやバグレポートで特定の行を参照するときに役立ちます。
右の列はライブプレビューです: 選択したフレーム、パディング、背景の中に強調表示されたコードをレンダリングします。すべてのコントロールはリアルタイムでプレビューを更新します。Download PNGボタンは、html2canvasを介してネイティブ解像度でプレビューをシリアル化し、ブラウザのダウンロードをトリガーします。サーバーへのラウンドトリップなし、コードのアップロードなし。
歴史と背景
リスティング印刷 (1944年以降)
1944年のHarvard Mark Iは、プログラムリスティングを連続フィード紙に印刷し、コンピューターのメモリを離れる最初のソースコードアーティファクトでした。1950年代と1960年代を通じて、ラインプリンターはグリーンバー紙にFORTRANとCOBOLの何マイルもを生産しました。プリンターのデイジーホイールに1つのフォントしかなかったため、フォーマットは等幅でしたが、慣例は残りました: ソースコードは等幅です。なぜなら、それ以来すべてのエディタが80列の遺産を保持してきたからです。
Emacsでのライブシンタックスハイライト (1984)
Richard StallmanのEmacsは1984年にfont-lock-modeを追加し、最初の広く使用されたライブシンタックスハイライタでした。キーワードは1つの色で、文字列は別の色で、コメントは暗くなりました。視覚的エンコーディングは、コードを構造化テキストとして扱うことで読み取りを加速しました。Vimは1991年にシンタックスを追加し、Macで1992年にBBEditを追加し、すべての現代のエディタ (VSCode、Sublime Text、JetBrains、Neovim) はこの系譜の上に構築されています。
TextMateのテーマとMonokai (2006)
Allan OdgaardのTextMate (2004) は、デザイナーが共有できるテーマファイルを導入しました。Wimer HazenbergのMonokaiテーマ (2006) は、2000年代後半の象徴的な暗いコード美学になりました。Sublime Textは2008年にMonokaiをデフォルトとして採用し、その色 (緑のキーワード、ピンクの文字列、ダークオリーブの背景に青い関数) は、真剣なコード作業の視覚的な省略形になりました。
highlight.js出荷 (2006)
Ivan Sagalaevは2006年にhighlight.jsをリリースしました。これは、言語を自動的に検出してセマンティックHTMLを生成するピュアJavaScriptシンタックスハイライタです。ブログ、ドキュメントサイト、Stack Overflowのデフォルトになりました。今日では190以上の言語と250以上のテーマをサポートしています。このツールは、基礎となるシンタックスカラーリングのためにhighlight.jsを使用します。
Carbon ローンチ (2017)
Dawn Labs (Mike FixとBrian Dennis) は2017年にcarbon.now.shをローンチしました。これは、ソーシャルメディア用の美しいコードスクリーンショットを作成することに特化した最初のブラウザツールでした。グラデーション背景、macOSウィンドウクローム、設定可能なパディング、ワンクリックPNGエクスポートを追加しました。Carbonは Twitter でバイラルになり、事実上カテゴリを発明しました。このツールは、Carbonアカウントなしで完全にあなたのブラウザで同じコア機能セットを提供します。
Ray.so、CodeSnap、Polacode (2020年以降)
Raycastは2020年にRay.soをローンチし、Carbonよりもクリーンなデフォルトでした。CodeSnapとPolacode (2018) は、エディタを離れることなく選択したコードのスクリーンショットを撮ることを可能にし、フォーマットをVSCode拡張機能としてもたらしました。カテゴリは、すべての開発者のコンテンツ作成ツールキットのデフォルトピースに成熟しました。パターン (ウィンドウドット、グラデーション背景、等幅フォント、シンタックステーマ) は、認識可能な視覚的ジャンルに安定しました。
実用的なワークフロー
コードスニペット付きのTwitterまたはX投稿
ツイート内のコード画像は、テキストとして貼り付けられた同じコードの3〜5倍のエンゲージメントを得ます。スニペットを貼り付け、グラデーション背景 (紫やピンクがタイムラインで最も読みやすい) を選び、ウィンドウドットにチェックを入れ、スニペットが10行未満の場合は行番号をオフのままにします。PNGをダウンロードし、ツイートコンポーザにドラッグします。
技術採用のためのLinkedIn投稿
LinkedInで金曜日のヒントやコードレビューの洞察を共有するとき、スタイル付きコード画像はスクロールを止めます。LinkedIn画像は、プレビューカードに対して1200×627ピクセルで最もよくレンダリングされます; パディングスライダーをエクスポートがそのアスペクトをおおよそ満たすまで調整します。ダークMonokaiテーマは、LinkedInの青灰色の背景に対してよく読み取れます。
ブログ投稿のヒーロー画像
特定の関数やパターンに関する記事の場合、その関数のスタイル付き画像は素晴らしいOpen Graphヒーロー (1200×630ピクセル) になります。画像は、Twitterカード、Slackリンクプレビュー、Facebook共有に表示されます。アクセシビリティのために、記事本文内にコピー貼り付けに適した実際の
ブロックとペアにします。
カンファレンスのスライド
KeynoteまたはGoogle Slidesプレゼンテーションでは、シンタックスハイライトされたコード画像はモニターからプロジェクターまで鮮明にスケールします。後列の読みやすさのためにフォントサイズスライダーを18または20ピクセルに設定し、高コントラストテーマ (Dark MonokaiまたはGitHub Dark) を選択し、透明な背景を使用してスライドテンプレートを透過させます。
GitHub READMEバナー
READMEは、ライブラリのhello-world例を示すスタイル付きコード画像でより良く開きます。画像はリポジトリのdocs/フォルダに存在し、Markdownを介して参照されます。GitHubはプロジェクトのランディングページで画像をネイティブにレンダリングし、そこではシンタックスハイライトされたPNGが下に続くプレーンテキストの囲まれたブロックよりもよく読み取れます。
YouTubeチュートリアルのサムネイルまたはBロール
コーディングチュートリアルの場合、高解像度コード画像はサムネイルの背景またはライブスクリーンセグメント間に挿入されるBロールとして機能します。寛大なパディングで14〜16ピクセルのフォントサイズでエクスポートし、エディタにドロップしてサイズを変更します。html2canvasがデバイスのピクセル比でレンダリングするため、画像は1080pまたは4Kで鮮明なままです。
よくある落とし穴
コード画像は検索可能ではない
検索エンジンは画像内のテキストをインデックス化できません (まだ) 。あなたのブログがGoogleトラフィックに依存している場合は、実際のコードを記事本文に
ブロックとして埋め込みます。スタイル付き画像はソーシャル共有のサムネイルまたはヒーローとしてのみ使用し、コードの主な表現としては使用しないでください。
スクリーンリーダーは画像内のコードを読み取れない
NVDA、JAWS、またはVoiceOverを使用する盲目のユーザーは、コードスクリーンショットに遭遇したときに「画像」とだけ聞こえ、それ以上は聞こえません。常にalt属性 (短いスニペット) または完全なソースを持つ視覚的に隠された
ブロックを介して、近くにアクセス可能なテキストとして同じコードを提供します。そうでなければ、投稿は支援技術にとって使用不可能です。
読者は画像からコードをコピーできない
オーディエンスがコードをコピーして実行したいとき、画像は彼らに再入力またはOCRを強制します。Google LensとmacOS Live Textはかなりよくしかし摩擦です。チュートリアルとhow-toでは、画像 (視覚的アピール用) をコピー貼り付けに適したテキストブロック (使いやすさ用) とペアにします。
長い行は折り返したり切られたりする
200文字のSQLクエリや深くネストされたJSX式は、フレームをオーバーフローします。プレビューは水平スクロールバーを追加しますが、エクスポートされたPNGは不自然に折り返すか、クリップします。スニペットを約80列に収まるようにリファクタリングするか、複数の小さなコード画像に分割します。エクスポート前に常にプレビューしてください。
ライトソーシャルメディア背景のダークテーマ
Monokaiダーク画像は、Twitterダークモードのタイムラインでは素晴らしく見えますが、ライトモードのフィードでは厳しいコントラストを作成します。ダークコードフレームの周りにパディングを追加して (色付きグラデーション背景が役立つ) 、ダークブロックが白いページに激しくぶつからないようにします。逆に、ライトテーマはダークモードフィードで反対の考慮事項を必要とします。
古い言語バージョンのハイライト
highlight.jsは良いですが、最先端から遅れています。新しいES2024シンタックス (using disposable resources、decorators) またはRustの非同期機能は完璧にハイライトされない可能性があります。コードはまだ読みやすいですが、キーワードはプレーンな識別子として表示される可能性があります。正確な最先端のカラーリングが重要な場合は、別のハイライタ (Shiki、Prism) を使用してください。
プライバシーとデータ処理
すべてのハイライトとラスタライズは、あなたのブラウザで行われます。highlight.jsはあなたのコードをローカルで解析し、html2canvasはレンダリングされたDOMをPNGにシリアル化し、ダウンロードはブロブURLを介してトリガーされます。あなたのソースコードをどのサーバーにも送信せず、入力をログに記録せず、出力を保存しません。
ページがロードされると (highlight.jsとhtml2canvas CDNファイルを含む) 、ツールはオフラインで動作します。ネットワークから切断して、独自のコード、内部API例、または第三者サービスに触れてはならないスニペットをスクリーンショットできます。CDNライブラリは一度ロードされ、ローカルにキャッシュされます。
コード・トゥ・イメージツールを使用しない場合
本番ブログコードブロック
how-to記事の本文内では、サーバーサイドハイライタ (Shiki、Prism、highlight.js) で実際の
ブロックを使用します。実際のコードブロックは選択可能、コピー可能、検索可能、アクセシブル、そしてダークモードCSSを介してスタイル設定可能です。画像はヒーロー、ソーシャル共有のサムネイル、または視覚的装飾のために予約し、機能するコードのためには予約しないでください。
検索可能である必要があるドキュメント
ドキュメントサイトがAlgolia DocSearch、GitBook search、または全文索引に依存している場合、画像内のコードは検索エンジンには見えません。特定の関数名を検索しているエンジニアは、画像のみの例でそれを見つけることができません。常にインデックス化されたドキュメントで実際のコードブロックを使用してください。
長いファイルまたは複数画面のコード
200行のファイルは、読みやすいフォントサイズで単一の画像に収まりません。論理的なチャンクに分割するか (画像ごとに1つの関数) 、または完全なソースを持つGitHub gistリンクを共有するだけです。長いファイルを1つのPNGに強制すると、読み取り不能な小さなテキストの壁が生成されます。
シークレットが見える機密性の高いコード
APIキー、データベースURL、またはハードコードされた資格情報を含むコードのスクリーンショットは、数時間以内にTwitterからスクレイピングされ、GitHubシークレットスキャナーによってインデックス化されます。資格情報が画像内にあるという事実は攻撃者を遅らせません; OCRパイプラインはそれらを拾い上げます。公開コード画像に表示されるシークレットは直ちにローテーションしてください。
その他の質問
PNG または SVG、どのエクスポート形式を使用すべきですか?
PNGはソーシャルメディアの安全なデフォルトです (普遍的にサポート、ロスレス、典型的なコード画像に小さなファイルサイズ) 。SVGはどのズームレベルでもよりシャープですが、Twitter、LinkedIn、またはほとんどのソーシャルプラットフォームでインラインコンテンツとしてサポートされていません。あなた自身のブログでのWeb埋め込みの場合、SVGは技術的により良い; ソーシャル共有の場合は、PNGに固執します。このツールはPNGのみエクスポートします。
どのalt textを書くべきですか?
短いスニペット (5行未満) の場合、実際のコードをalt属性に入れます。長いスニペットの場合、altに1文の要約を書き (例:「ユーザーデータをフェッチして404エラーを処理するJavaScript関数」) 、近くに表示される
ブロックとして完全なコードを含めます。コード画像でaltを空白のままにしないでください。
ソーシャルメディアにはどの寸法が機能しますか?
Twitter/X: 1200×675ピクセル (16:9) 、またはポートレート用に1080×1350。LinkedIn: 1200×627 (横向き) または1200×1200 (正方形) 。Instagram: 1080×1080 (正方形) 。Open Graphヒーロー: 1200×630。ツールは自然なプレビューサイズでエクスポートします; ターゲットのアスペクトをおおよそ達成するためにパディングとフォントを調整し、ピクセルパーフェクトな寸法が必要な場合は画像エディタで切り取りまたはパディングします。
コード画像に最適なフォントは?
このツールはFira Code、Cascadia Code、またはConsolas (ブラウザは最初にインストールされたものを選択) を使用します。Fira Codeにはプログラミングリガチャ (=> は単一の矢印グリフとしてレンダリング) があり、スクリーンショットで印象的に見えます。JetBrains MonoとSource Code Proは同等に読みやすい代替手段です。Windowsでシステムデフォルトのいかにも時代遅れに見えるCourierである可能性のある汎用monospaceは避けてください。
なぜエクスポートはプレビューと少し異なるように見えますか?
html2canvasは、JavaScriptでCSSレンダリングを再実装することでDOMをラスタライズします。一部のプロパティ (高度なCSSフィルター、特定のフォント機能、複雑な背景を持つ::before/::after擬似要素) はライブブラウザプレビューと少し異なってレンダリングされる可能性があります。違いは通常小さく、サブピクセルのアンチエイリアシングまたはフォントの太さですが、エクスポートが間違って見える場合は、スタイリングを簡素化してください。
これはCarbon (carbon.now.sh) とどう比較されますか?
Carbonにはより多くのテーマ、より多くのフォント、アニメーションGIFエクスポートがあります。このツールは、コードを第三者サーバーに送信することなく、80パーセントのケース (PNGエクスポート、最も人気のあるテーマ、グラデーション背景、ウィンドウドット) をカバーします。一回限りのソーシャルメディア共有では速く; 多くの画像で重いカスタマイズやブランディングの一貫性のためには、Carbonのプリセットライブラリを打ち負かすのは難しい。