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 em HTML adequado em tempo real.

O que o md-block faz?

Seu processo atual pode envolver a criação de arquivos Markdown manualmente e, em seguida, convertê-los em HTML. É assim que muitos aplicativos CMS modernos funcionam. Ou você pode usar um framework como Angular para renderizar Markdown em páginas.

A biblioteca md-block não é estritamente uma alternativa; em vez disso, ele 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 parecer:

<html>
<cabeça>...</head>
<corpo>
<bloco md>
# Cabeçalho
Alguns Markdown *incorporado* que o `md-block` pode converter para você!
</md-block>
</body>
</html>
instagram viewer

É uma boa ideia alinhar à esquerda seu código Markdown incorporado, sem nenhum recuo à esquerda. Isso ocorre porque o espaço em branco inicial pode ser significativo no Markdown, ao contrário do HTML.

A biblioteca apresenta seu próprio elemento HTML personalizado, bloco md. Embora este elemento não seja parte do padrão HTML, esta é uma técnica válida. O padrão de Componentes da Web (MDN) inclui uma API chamada Elementos personalizados. Esta API suporta o 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ço em branco pré-formatado e uma fonte monoespaçada, é pelo menos um pouco mais fácil de ler:

<estilo>md-block { white-space: pre; família de fontes: monoespaçado; }</style>

Você pode querer esse tipo de saída se estiver escrevendo um tutorial sobre Markdown. Ele permite que você explique a sintaxe do Markdown enquanto permite que você 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 para o navegador como Markdown:

Como usar o bloco md

Depois de adicionar a biblioteca md-block à sua página, você pode escrever seu Markdown em bloco md elementos. 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:

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

Essa pode não ser a abordagem mais eficiente, mas é definitivamente a mais rápida. Basta adicionar este código ao seu cabeça 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 instalar md-quadra

Blocos de Markdown vs. Remarcação Inline

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

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

<p>Um parágrafo HTML contendo <md-span>*itálico*</md-span> texto.</p>

Como Sintaxe Destacar Blocos de Código Markdown Com Prism

Prisma é 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 que o md-block gera.

Então, com este HTML:

<html>
<corpo>
<bloco md>
```javascript
funçãoquadrado(número) {
Retorna número * número;
}
```
</md-block>
<script src="prisma.js"></script>
</body>
</html>

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

Suas opções para escrever online apenas aumentaram

Como você usa o md-block depende de você, mas há muito potencial para soluções inventivas usando-o. Você pode usá-lo para executar um CMS muito leve para escritores que estão confiantes em usar Markdown, mas não 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.