La sintaxis simple de Markdown lo convierte en una excelente alternativa a HTML. El lenguaje siempre ha soportado la incrustación de HTML, pero ahora puede ir por el otro lado e incrustar Markdown en HTML.

Usando una biblioteca simple, puede alojar Markdown incrustado en sus páginas web y convertirlo a HTML adecuado sobre la marcha.

¿Qué hace md-block?

Su proceso actual puede implicar la creación de archivos Markdown a mano y luego convertirlos a HTML. Así es como funcionan muchas aplicaciones CMS modernas. O puede usar un marco como Angular para convertir Markdown en páginas.

La biblioteca md-block no es estrictamente una alternativa; en cambio, cumple con un caso de uso ligeramente diferente. Convierte Markdown en línea en su HTML equivalente. Puede incrustar Markdown en sus archivos HTML y mostrarlo en el cliente, en el momento de la solicitud.

Así es como podría verse:

<html>
<cabeza>...</head>
<cuerpo>
<bloque md>
# Bóveda
¡Algunos Markdown *incrustados* que `md-block` puede convertir para usted!
</md-block>
</body>
</html>
instagram viewer

Es una buena idea alinear a la izquierda su código Markdown incrustado, sin ninguna sangría inicial. Esto se debe a que los espacios en blanco iniciales pueden ser significativos en Markdown, a diferencia de HTML.

La biblioteca presenta su propio elemento HTML personalizado, bloque md. Aunque este elemento no es parte del estándar HTML, esta es una técnica válida. El estándar de componentes web (MDN) incluye una API llamada Elementos personalizados. Esta API admite el registro dinámico de elementos personalizados mediante JavaScript.

Antes de cargar la biblioteca md-block, esta página se representará de forma familiar:

Por supuesto, puede diseñar el elemento md-block para que se parezca más a un editor de texto. Con espacios en blanco preformateados y una fuente monoespaciada, es al menos un poco más fácil de leer:

<estilo>bloque md { espacio en blanco: pre; familia de fuentes: monoespaciado; }</style>

Es posible que desee este tipo de salida si está escribiendo un tutorial sobre Markdown. Le permite explicar la sintaxis de Markdown mientras le permite editar fácilmente su Markdown de muestra:

Pero el truco de fiesta de md-block es convertir ese Markdown en HTML final.

Incluso con los estilos de navegador predeterminados, el contenido ahora se muestra como su HTML normal, aunque lo envió al navegador como Markdown:

Cómo usar md-block

Una vez que haya agregado la biblioteca md-block a su página, puede escribir su Markdown en bloque md elementos. Luego, la biblioteca formateará su Markdown automáticamente, y puede continuar incrustando Markdown según lo requiera.

Hay, sin embargo, algunas variaciones en este proceso.

Obtenga el script de forma remota o instálelo usted mismo

La forma más fácil de comenzar es hacer referencia a la biblioteca desde el sitio web oficial de md-block:

<tipo de guión ="módulo" origen="https://md-block.verou.me/md-block.js"></script>

Puede que este no sea el enfoque más eficiente, pero definitivamente es el más rápido. Simplemente agregue este código a su cabeza y su página automáticamente renderizará cualquier cosa en un elemento md-block a HTML:

Por supuesto, puede descargar ese archivo JavaScript y alojarlo en su propio sitio. O puede instalarlo a través de npm:

npm Instalar en pc Maryland-bloquear

Bloques de rebajas vs. Rebaja en línea

El elemento predeterminado, que lleva el nombre de la propia biblioteca, es bloque md. Pero también puedes usar un md-span elemento para Markdown en línea, como texto en medio de una oración:

El caso de uso de Markdown en línea es probablemente menos común, pero aún así puede usarlo:

<pags>Un párrafo HTML que contiene <md-span>*itálico*</md-span> texto.</pags>

Cómo resaltar la sintaxis de bloques de código Markdown con Prism

Prisma es un resaltador de sintaxis cocreado por Lea Verou, creadora de md-block. Puede usarlo para resaltar bloques de código con formato previo en una página web, incluidos los que genera md-block.

Entonces, con este HTML:

<html>
<cuerpo>
<bloque md>
```javascript
funcióncuadrado(número) {
devolver número * número;
}
```
</md-block>
<secuencia de comandos src="prisma.js"></script>
</body>
</html>

Verá un código bien formateado con resaltado consciente de la sintaxis:

Tus opciones para escribir en línea acaban de aumentar

La forma en que usa md-block depende de usted, pero hay mucho potencial para soluciones ingeniosas que lo usan. Puede usarlo para ejecutar un CMS muy liviano para escritores que confían en usar Markdown, pero no HTML.

Markdown es un lenguaje perfecto para una audiencia general. Su adopción por parte de herramientas como Slack probablemente aumentará aún más el uso.