Cómo usar: Código a Imagen
- Pega tu código o prueba el Ejemplo. El lenguaje se detecta automáticamente, o puedes elegirlo.
- Elige un tema, un fondo y un estilo de ventana, y escribe un nombre de archivo para la barra de título.
- Ajusta el relleno y el tamaño de la fuente; activa los números de línea si vas a hacer referencia a ellos.
- Descarga un PNG (2× se ve nítido en pantallas retina y redes sociales), un SVG para documentación, o pulsa Copiar imagen y pégala en Slack, X o una diapositiva.
¿Por qué compartir código como imagen?
En redes sociales y en diapositivas, el código como texto pierde su formato y sus colores. Una imagen de código mantiene la indentación, el resaltado y la maquetación tal como los quieres, se ve bien en el feed y un procesador de texto no puede desordenarla. Para la documentación de la que la gente va a copiar, sigue usando bloques de código en texto y añade la imagen solo como ilustración.
Cómo se dibuja
El fragmento se resalta con un pequeño tokenizador integrado (comentarios, cadenas, números, palabras clave, funciones y propiedades para diez lenguajes comunes) y se pinta en un canvas con la fuente monoespaciada de tu sistema. La exportación a PNG lo vuelve a dibujar a 1×, 2× o 3× para que se mantenga nítido; la exportación a SVG conserva el texto como texto, así que escala a cualquier tamaño y sigue siendo buscable. Todo ocurre en tu navegador.
Relacionado: Formateador de JavaScript, Formateador de HTML, Generador de gradientes CSS.
También se busca como: captura de código, imagen de código, generador de imágenes de código, código a png, resaltado de sintaxis imagen, compartir código como imagen, capturas de código bonitas.
Herramientas que combinan con: Código a Imagen
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Formateador JSON — Pega el código JSON para formatearlo, minimizarlo o validarlo.
- Editor Markdown — Escribe Markdown con vista previa en vivo lado a lado, barra de formato y atajos de teclado.
- Generador de imágenes OG — Crea en cuestión de segundos una imagen de vista previa del enlace con un acabado impecable para Facebook, LinkedIn, X, Slack y WhatsApp: elige una plantilla, escribe el título, añade un logotipo y, a continuación, descárgate el archivo PNG y las metaetiquetas correspondientes.