HTML

Gerador de imagens de código HTML

Transforme trechos de HTML em imagens que valem a pena compartilhar, sem sair do seu Mac.

Capturas de HTML servem sobretudo para mostrar estrutura, então aqui a indentação carrega mais significado do que na maioria das linguagens.

O Codeshot detecta HTML pelo código que você cola, então não há seletor de linguagem para errar. Aqui está o mesmo trecho em três dos 30 temas inclusos, renderizados com as folhas de estilo do próprio app.

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
Atom One · escuro
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
Edge · escuro
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
GitHub · escuro

Escolhendo um tema para HTML

Mantenha o aninhamento raso o bastante para a indentação se ver de relance. Passando de três níveis, a imagem provavelmente não é o meio certo.

Acertando o tamanho

Deixe a imagem seguir o conteúdo ou fixe uma proporção — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 ou 3:4 — e exporte em 1×, 2× ou 3× para que continue nítida em telas retina. Copie direto para a área de transferência com C ou salve com S.

Veja os 30 temas lado a lado ou leia o fluxo completo.

Feito para HTML e outras 59 linguagens

Tudo roda no seu Mac. Seu código nunca sai dele.

Baixar para macOS