コードを画像で共有する理由
SNSやスライドでは、テキストのコードはインデントも色も失われてしまいます。画像なら書いたとおりのレイアウトを保ち、目も引きます。コピーしてもらう必要があるものなら、共有リンクやテキストのコードと組み合わせましょう。
コードを貼り付けて、テーマと背景を選ぶだけ。SNSの投稿、スライド、ドキュメント、不具合報告に使える、くっきりした画像をコピーできます。
SNSやスライドでは、テキストのコードはインデントも色も失われてしまいます。画像なら書いたとおりのレイアウトを保ち、目も引きます。コピーしてもらう必要があるものなら、共有リンクやテキストのコードと組み合わせましょう。
各言語は、それぞれの文法でハイライトされます。キーワード、文字列、数値、コメント、関数、型に、テーマの別々の色が付きます。数行の典型的なコードなら自動判別でうまくいきますが、短いコードやどちらとも取れるコードは、言語を自分で選びましょう。
コードの画像は、スクリーンリーダーで読み上げることもコピーすることもできません。投稿するときは、テキストのコードやリンクを添え、コントラストの十分なテーマを使いましょう。印刷するドキュメントには、明るい「Paper」テーマがいちばん向いています。
コードを入力するか貼り付けるか、ソースファイルを読み込みます。タイトルバーにファイル名を入れることもできます。
言語(自動判別も可)、テーマ、背景、余白、文字サイズ、ウィンドウ枠、行番号を選びます。
画像をコピーして投稿やチャットにそのまま貼り付けるか、PNGでダウンロードするか、もう一度開ける共有リンクを送ります。
コードは10〜20行程度に短く、1行は80文字くらいまでに。ほとんどのタイムラインでは、画像がスマホの幅まで縮小されるからです。
SNSの投稿なら、大きめの文字と中くらいの余白がいちばん読みやすくなります。スライドやレビューで特定の行について話すなら、行番号が便利です。
プロのコツ何もアップロードされません。ハイライトも描画もブラウザ内で行われるので、非公開のリポジトリのコードも画像にできます。
共有リンクはコードをリンクの中(#以降)に含め、当サイトのサーバーには保存しません。
プライバシーコードの画像化について知っておきたいこと