HTML

HTMLコードスクリーンショット生成

HTMLのスニペットを、Macから離れることなく共有したくなる画像に。

HTML のスクリーンショットは構造を見せるために使われることがほとんどです。つまりインデントが他の言語より多くの意味を担います。

Codeshotは貼り付けたコードからHTMLを判別するので、言語の選び間違いは起きません。付属する30種類のうち3つのテーマで同じスニペットを、アプリ自身のスタイルシートで表示しています。

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Atom One · ダーク

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Edge · ダーク

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

GitHub · ダーク

HTMLに合うテーマ選び

インデントがひと目で分かる程度の浅さに保ってください。3 階層より深くなるなら、画像はおそらく適した手段ではありません。

サイズを正しく決める

画像サイズを内容に合わせるか、比率で固定します（1:1、4:3、3:2、16:9、9:16、2:3、3:4）。そのうえで1×・2×・3×から選んで書き出せば、Retinaディスプレイでも鮮明なままです。⌘⇧Cでクリップボードに直接コピー、または⌘Sで保存できます。

30種類のテーマを見比べるか、全体の流れをご覧ください。

HTMLと、ほかの59言語のために

すべてMac上で動作します。コードが外に出ることはありません。

macOS版をダウンロード