Como renderizar Markdown em uma página da Web com md-block

Esta biblioteca pode ser pequena, mas é incrível. Incorpore sua redução, traduza-a automaticamente e, como resultado, aprimore seu processo de publicação.

A sintaxe simples do Markdown o torna uma excelente alternativa ao HTML. A linguagem sempre suportou a incorporação de HTML, mas agora você pode seguir o outro caminho e incorporar Markdown em HTML.

Usando uma biblioteca simples, você pode hospedar Markdown incorporado em suas páginas da web e convertê-lo para HTML adequado instantaneamente.

O que o md-block faz?

Seu processo atual pode envolver a criação manual de arquivos Markdown e a conversão deles em HTML. É assim que muitos aplicativos CMS modernos funcionam. Ou você pode usar uma estrutura como Angular para renderizar Markdown em páginas.

A biblioteca md-block não é estritamente uma alternativa; em vez disso, atende a um caso de uso ligeiramente diferente. Ele converte Markdown embutido em seu HTML equivalente. Você pode incorporar Markdown em seus arquivos HTML e renderizá-lo no cliente, no momento da solicitação.

Veja como isso pode ser:

<html>
    <head>...</head>
 
    <body>
        <md-block>
# Heading
Some *embedded* Markdown which `md-block` can convert for you!
        </md-block>
    </body>
</html>

É uma boa ideia alinhar à esquerda seu código Markdown incorporado, sem qualquer recuo inicial. Isso ocorre porque os espaços em branco iniciais podem ser significativos no Markdown, ao contrário do HTML.

A biblioteca introduz seu próprio elemento HTML personalizado, md-block. Embora este elemento não faça parte do padrão HTML, esta é uma técnica válida. O padrão Web Components (MDN) inclui uma API chamada Custom Elements. Esta API oferece suporte ao registro dinâmico de elementos personalizados usando JavaScript.

Antes de carregar a biblioteca md-block, esta página será renderizada de maneira familiar:

Claro, você pode estilizar o elemento md-block para que pareça mais com um editor de texto. Com espaços em branco pré-formatados e uma fonte monoespaçada, é pelo menos um pouco mais fácil de ler:

<style>md-block { white-space: pre; font-family: monospace; }</style>

Você pode querer esse tipo de resultado se estiver escrevendo um tutorial sobre Markdown. Ele permite que você explique a sintaxe do Markdown e edite facilmente seu Markdown de amostra:

Mas o truque do md-block é converter esse Markdown em HTML final.

Mesmo com estilos de navegador padrão, o conteúdo agora é exibido exatamente como seu HTML normal, mesmo que você o tenha enviado ao navegador como Markdown:

Como usar o bloco md

Depois de adicionar a biblioteca md-block à sua página, você pode escrever seu Markdown em elementos md-block. A biblioteca formatará seu Markdown automaticamente e você poderá continuar incorporando o Markdown conforme necessário.

Existem, no entanto, algumas variações neste processo.

Obtenha o script remotamente ou instale você mesmo

A maneira mais fácil de começar é fazer referência à biblioteca no site oficial do md-block:

<script type="module" src="https://md-block.verou.me/md-block.js"></script>

Esta pode não ser a abordagem mais eficiente, mas é definitivamente a mais rápida. Basta adicionar este código ao seu head e sua página renderizará automaticamente qualquer coisa em um elemento md-block para HTML:

Você pode, é claro, baixar esse arquivo JavaScript e hospedá-lo em seu próprio site. Ou você pode instalá-lo via npm:

npm install md-block

Blocos de Markdown vs. Markdown Inline

O elemento padrão, nomeado após a própria biblioteca, é md-block. Mas você também pode usar um elemento md-span para Markdown embutido, como texto no meio de uma frase:

O caso de uso do Markdown in-line é provavelmente menos comum, mas você ainda pode usá-lo:

<p>An HTML paragraph containing <md-span>*italic*</md-span> text.</p>

Como destacar blocos de código Markdown de destaque de sintaxe com Prism

Prism é um marcador de sintaxe que Lea Verou, criadora do md-block, co-criou. Você pode usá-lo para destacar blocos de código pré-formatados em uma página da web, incluindo aqueles gerados pelo md-block.

Então, com este HTML:

<html>
<body>
<md-block>
```javascript
function square(number) {
    return number * number;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Você verá um código bem formatado com realce sintaticamente consciente:

Suas opções para escrever online acabaram de aumentar

A maneira como você usa o md-block depende de você, mas há muito potencial para soluções criativas usando-o. Você pode usá-lo para executar um CMS muito leve para escritores que confiam no uso do Markdown, mas não do HTML.

Markdown é uma linguagem perfeita para o público em geral. Sua adoção por ferramentas como o Slack provavelmente aumentará ainda mais o uso.