Guía definitiva de bloques de código en Markdown

Esta guía trata bloques de código en Markdown y muestra cómo mantener ejemplos técnicos legibles, copiables y bien resaltados en documentos e imágenes. El objetivo no es una captura cualquiera, sino un recurso legible, vinculado a su fuente Markdown y reutilizable al publicar.

PNG conserva nítidos texto, código, tablas y líneas finas. JPEG puede pesar menos con fondos fotográficos, pero suaviza tipografía pequeña. PDF conviene para varias páginas y DOCX para edición de oficina. El formato debe responder al canal final.

1. Preparar. usar código en línea para tokens y fences para varias líneas.
2. Previsualizar. añadir lenguaje correcto y revisar líneas largas.
3. Exportar. exportar con ancho que conserve sangría y probar copia desde la fuente.

Pega este ejemplo pequeño para validar tipografía y espacio antes del contenido real.

function renderStatus(ok) {
  return ok ? "ready" : "retry";
}

console.log(renderStatus(true));

CommonMark define el núcleo portable. Tablas, tareas y ciertos autolinks son extensiones GFM y pueden variar. Mermaid y KaTeX son sintaxis independientes que requieren renderizadores compatibles. Prueba siempre el destino final.

• Escribe alt útil para imágenes informativas.
• Mantén jerarquía y lectura lógicas.
• Comprueba contraste claro y oscuro.
• Revisa al tamaño real de publicación.
• Versiona la fuente Markdown.
• Reexporta tras cambios; no parches texto en el bitmap.

Evita letra mínima, tablas demasiado anchas, siglas sin explicar, imágenes remotas inestables y recortes sin contexto. No prometas render idéntico en todos los motores: extensiones y temas marcan el límite.

Los límites factuales se comprobaron con estas fuentes primarias:

• https://spec.commonmark.org/current/
• https://docs.github.com/en/get-started/writing-on-github
• https://markdowntoimage.com/

Abre MarkdownToImage y prueba el ejemplo con ancho y tema finales. Continúa con la primera guía y la segunda guía.