作業はすべてひとつのウィンドウで完結し、書き出される画像は画面で見えているものとまったく同じです。テーマとサイズは一度決めれば起動をまたいで保持されるので、考えることがあるのは最初の 1 枚だけ。以降は貼り付けて書き出すだけになります。
1. コードを貼り付ける
コードをコピーし、⌘⇧V でそのまま Codeshot に貼り付けます。このショートカットはウィンドウのどこからでもソース全体を置き換えるので、先にエディタ部分をクリックする必要はありません。
貼り付けた時点でハイライトが適用されます。言語は 60 種類の中からコード自体をもとに判定され、短い断片であいまいなときは「言語」メニューから指定し直せます。C の 3 行と C++ の 3 行は、どんな判定器から見ても同じに見えるからです。
エディタを撮るのではなくテキストを貼り付ける、というのがここでの肝心な点です。カーソルも、選択範囲のハイライトも、余白のアイコンも、エディタの行幅も置いていけます。どれも画像に入るべきものではありません。
2. テーマを選ぶ
シンタックステーマは 30 種類あり、それぞれにライトとダークのバリアントがあります。すべてを並べて見ることができ、アプリと同じスタイルシートで描画されています。
選ぶときに知っておくとよいことが 2 つあります。読み手にとって見慣れた画像にしたいなら、自分のエディタに合わせてください。Swift なら Xcode、たいていのものは GitHub です。ただし小さく見られる場所に出すなら、見慣れていることよりコントラストが大事です。淡いライトテーマは、フィードのサイズに縮小されると構造が失われます。
3. 背景を選ぶ
コードはキャンバスの上に置かれます。そのキャンバスには、19 種類の macOS 壁紙、92 種類のグラデーション、自分で決めた単色、あるいは手持ちの画像を使えます。
背景を完全にオフにして、透過で書き出すこともできます。すでに独自の背景があるスライドやページに載せる場合は、これが望ましい形です。
4. フレームを整える
ウィンドウの角丸、ウィンドウ内側のパディング、その外側のマージン、そしてドロップシャドウを設定します。信号機ボタンとウィンドウタイトルは表示・非表示を切り替えられ、Mac にインストール済みの等幅フォントならどれでも使えます。
ここは一度だけ触る設定です。好みの状態にしておけば、以降のすべてのコードに引き継がれます。10 枚目が数分ではなく数秒で終わる理由の大半はこれです。
5. 適切なサイズで書き出す
サイズを内容に合わせるか、比率に固定します。1:1、4:3、3:2、16:9、9:16、2:3、3:4 から選べます。プリセットは幅と高さの入力欄へのショートカットにすぎないので、それ以外の比率は打ち込めば済みます。
書き出しは 1×、2×、3× から。既定は 2× にしてください。小さな文字を 1× で書き出すと Retina ディスプレイでぼやけます。コード画像が素人っぽく見える原因として、これが群を抜いて多いのです。
あとは好きな方法でアプリの外へ出します。⌘⇧C でクリップボードに直接コピー、プレビューを別のアプリへドラッグ、あるいは ⌘S で保存。
どこに出すのか
適切な比率は出す先によって完全に変わります。プラットフォームごとに切り取り方が違うので、ここを外さないことには意味があります。X、LinkedIn、Facebook の個別ガイドと、その他のサイズガイドがあります。
最後にひとつ、はっきり書いておきます。画像はコピーできず、検索もできず、スクリーンリーダーでも読めません。眺めるためではなく使うためのコードなら、画像と並べてソースへのリンクを載せてください。