HTML

Generador de imágenes de código HTML

Convierte fragmentos de HTML en imágenes que merece la pena compartir, sin salir de tu Mac.

Las capturas de HTML se usan sobre todo para enseñar estructura, así que aquí la indentación carga más significado que en la mayoría de lenguajes.

Codeshot detecta HTML a partir del código que pegas, así que no hay selector de lenguaje que puedas equivocar. Aquí tienes el mismo fragmento en tres de los 30 temas incluidos, renderizados con las hojas de estilo de la propia 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 · oscuro
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
Edge · oscuro
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
GitHub · oscuro

Elegir un tema para HTML

Mantén el anidamiento lo bastante plano como para que la indentación se vea de un vistazo. Si pasa de tres niveles, seguramente la imagen no sea el medio adecuado.

Acertar con el tamaño

Deja que la imagen siga a tu contenido o fíjala a una proporción — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 o 3:4 — y exporta a 1×, 2× o 3× para que se mantenga nítida en pantallas retina. Cópiala al portapapeles con C o guárdala con S.

Mira los 30 temas comparados o lee el flujo completo.

Hecho para HTML y otros 59 lenguajes

Todo se ejecuta en tu Mac. Tu código nunca sale de ahí.

Descargar para macOS