Markdown → HTML

Markdown convertido en HTML limpio y semántico. Gratis, sin subida. 1 GB máx. · Hasta 1 GB · Procesado localmente, nunca enviado a un servidor.

El Markdown sirve para escribir, el HTML sirve para publicar, y en algún momento hay que pasar de uno al otro. La petición nace casi siempre de una necesidad concreta: pegar un artículo en un sistema de publicación que solo admite HTML, producir una página de documentación legible sin instalar un generador de sitios, o comprobar qué aspecto tendrá un fichero de presentación antes de subirlo.

La herramienta toma el texto escrito en el campo o importado desde un archivo .md, se lo confía a la biblioteca marked y muestra el resultado justo debajo. Se ofrecen dos salidas: una página HTML completa y autónoma, para descargar, o el fragmento solo, copiado al portapapeles y listo para pegarlo en una plantilla ya existente.

Hay un detalle que conviene conocer antes de empezar. El HTML producido pasa por un filtro, tanto para la vista previa como para la descarga. Si su Markdown contiene etiquetas HTML escritas a mano, una parte se conservará y otra se retirará. La lista exacta figura más abajo, junto con la variante de Markdown que se reconoce y las sintaxis corrientes que no forman parte de ella.

Cómo se usa

  1. Escriba o importe el Markdown Escriba directamente en el campo, pegue su texto o use el botón de importación para cargar un archivo .md o .markdown, cuyo contenido sustituye al del campo.
  2. Convierta a HTML El botón carga marked en el primer uso y muestra el resultado bajo el campo. El texto sigue siendo modificable: corrija y vuelva a convertir tantas veces como haga falta.
  3. Revise la vista previa Títulos, listas, tablas y bloques de código aparecen tal como se van a producir. Un título que se haya quedado en texto simple delata una almohadilla que no va seguida de un espacio.
  4. Descargue la página completa El archivo document.html es autónomo: declaración de tipo de documento, codificación UTF-8, atributo de idioma, etiqueta de visualización móvil y hoja de estilos incorporada. No hace falta ningún archivo externo.
  5. O copie solo el fragmento El segundo botón coloca en el portapapeles el contenido sin cabecera ni estilos, que es el formato que espera la mayoría de sistemas de publicación.

La variante de Markdown que se reconoce

marked aplica por defecto la variante llamada GitHub Flavored Markdown. Además de la sintaxis básica, títulos, negrita, cursiva, listas anidadas, citas, enlaces, imágenes y líneas divisorias, dispone de tablas con alineación por columna, texto tachado entre dobles virgulillas, casillas de verificación y bloques de código delimitados por tres acentos graves. Una dirección escrita en claro se convierte en enlace. El lenguaje indicado detrás de los acentos graves acaba como clase en la etiqueta de código, sin coloreado sintáctico.

Hay tres comportamientos que sorprenden con regularidad. Un salto de línea simple no corta el párrafo: dos líneas consecutivas se unen, salvo que la primera termine con dos espacios. Los títulos se producen sin identificador de anclaje, de modo que un índice escrito a mano no encuentra sus destinos. Y las notas al pie, las listas de definiciones y los bloques de metadatos al principio del archivo no se gestionan; estos últimos salen como una línea divisoria seguida de un título de segundo nivel.

El HTML que usted escribe dentro del Markdown

La sintaxis Markdown permite insertar etiquetas HTML en mitad del texto, y marked las deja pasar tal cual. Después interviene un filtro, tanto antes de la vista previa como antes de la descarga, que retira siempre los mismos elementos: scripts, marcos integrados, objetos incrustados, formularios, bloques noscript y etiquetas de cabecera del documento. Se suprimen los atributos de evento, igual que los enlaces cuya dirección empieza por javascript, data o vbscript, con la única excepción de las imágenes codificadas en base64.

Todo lo demás se conserva: una tabla escrita a mano, un bloque desplegable, superíndices, abreviaturas, contenedores con sus clases y sus imágenes atraviesan la conversión sin daño. Un vídeo integrado mediante un marco, en cambio, desaparecerá; añada la integración después, desde su sistema de publicación.

La página descargada y lo que queda por hacer

El archivo obtenido se basta a sí mismo: lleva incorporado su propio estilo, no reclama ninguna fuente ni ningún script externo y se abre sin conexión. La presentación es sobria: columna de 760 píxeles centrada, texto en Georgia, títulos en Helvetica, bloques de código sobre fondo gris claro, tablas de filetes finos e imágenes reducidas a la anchura del texto.

Quedan tres retoques de su parte. El título del documento vale Document y el archivo se llama siempre document.html: ábralo en un editor para cambiar la etiqueta de título y renombrarlo. El atributo de idioma del elemento html está fijado en fr, así que conviene cambiarlo a es antes de publicar, tanto por los lectores de pantalla como por los buscadores. Las imágenes conservan la ruta que usted haya escrito; una ruta relativa da por supuesto que la carpeta correspondiente acompaña a la página, mientras que una dirección completa funciona tal cual.

Entrada de blog, documentación y lo que la herramienta no hace

Para una entrada de blog, use el botón que copia el fragmento: la mayoría de sistemas de publicación esperan el contenido solo y aplican su propia plantilla, mientras que pegar ahí una página completa produciría un documento anidado dentro de otro. Para un manual que haya que entregar o archivar, la página completa encaja mejor.

Para un sitio de documentación propiamente dicho, con navegación entre páginas e índice automático, un generador de sitios estáticos sigue siendo la herramienta adecuada: aquí cada archivo se convierte por separado y nada enlaza unas páginas con otras. El texto escrito no sale de la página, y lo único que se recupera es la biblioteca marked, que el propio sitio aloja y sirve; el historial local guarda la mención de que hubo una conversión y el número de palabras del texto de partida.

Preguntas frecuentes

¿Por qué desaparecen mis saltos de línea?

marked sigue la regla original del Markdown, según la cual un salto de línea simple no corta el párrafo. Termine la línea con dos espacios para forzar el salto, o deje una línea en blanco entre ambas.

¿Por qué mi bloque de código no aparece coloreado?

El lenguaje indicado detrás de los acentos graves se convierte en una clase de la etiqueta de código, pero no se aplica ningún coloreado. Añada una biblioteca de coloreado sintáctico en la página final si quiere color.

¿Por qué ha desaparecido mi vídeo integrado?

Los marcos integrados están entre los elementos que retira el filtro, junto con los scripts, los objetos incrustados y los formularios. Publique el HTML sin el vídeo y añada después la integración desde su herramienta de publicación.

¿Por qué los enlaces de mi índice no llevan a ninguna parte?

Los títulos se producen sin identificador de anclaje. Coloque usted mismo un anclaje en HTML antes de cada título, o deje que su sistema de publicación genere los identificadores al mostrar la página.

Mi bloque de metadatos acaba dentro de la página, ¿es normal?

Sí. Un bloque de metadatos al principio del archivo no se reconoce como tal: la línea de guiones de arriba se convierte en una línea horizontal y la línea siguiente, en un título de segundo nivel. Retire ese bloque antes de convertir.

¿Puedo procesar varios archivos .md seguidos?

Cada importación sustituye el contenido del campo, así que las conversiones se hacen de una en una. Como el campo sigue siendo modificable, también puede pegar en él varios documentos uno detrás de otro.

¿La vista previa se actualiza en directo mientras escribo?

No: hay que pulsar el botón de conversión para ver el resultado, que aparece bajo el campo. El texto sigue siendo modificable después, así que el ciclo normal es corregir y volver a convertir tantas veces como haga falta. La biblioteca marked solo se carga en el primer uso, de modo que las conversiones siguientes son inmediatas.

¿El HTML que genera es limpio o viene cargado de clases y estilos?

El botón que copia el fragmento entrega solo las etiquetas estructurales que produce marked —títulos, párrafos, listas, tablas, enlaces y bloques de código—, sin clases decorativas ni estilos incorporados, que es lo que espera la mayoría de sistemas de publicación. La página completa que se descarga sí lleva su propia hoja de estilos dentro, y con dos detalles que conviene retocar: el título del documento vale Document y el atributo de idioma está fijado en fr, así que hay que cambiarlo a es antes de publicar.

¿Hay que registrarse o subir el archivo .md a algún sitio?

Ni lo uno ni lo otro. El botón de importación lee el archivo .md o .markdown desde su propio equipo y vuelca el contenido en el campo; el texto no sale de la pestaña y la única petición de red es la biblioteca marked, que aloja y sirve el propio sitio. El historial local se limita a anotar que hubo una conversión y el número de palabras del texto de partida, nunca el texto.

Herramientas similares

Descubrir otras herramientas

Categorías