Uma vez que renderizar Markdown em uma página da Web com md-block

A sintaxe simples do Markdown o torna uma óptimo selecção 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 livraria 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 geração de arquivos Markdown manualmente e, em seguida, convertê-los em HTML. É mal muitos aplicativos CMS modernos funcionam. Ou você pode usar um framework uma vez que o Angular para renderizar o Markdown em páginas.

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

Veja uma vez que isso pode parecer:

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

É uma boa teoria 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 livraria apresenta seu próprio elemento HTML personalizado, conjunto md. Embora esse elemento não faça secção do padrão HTML, essa é 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 livraria md-block, esta página será renderizada de maneira familiar:

Um exemplo de marcação bruta exibida em um navegador

Simples, 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 nascente 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 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 exemplar:

Markdown bruto estilizado como código pré-formatado

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

Mesmo com estilos de navegador padrão, o teor agora é exibido exatamente uma vez que seu HTML normal, mesmo que você o tenha enviado ao navegador uma vez que Markdown:

Markdown incorporado formatado com md-block

Uma vez que usar o conjunto md

Depois de juntar a livraria md-block à sua página, você pode ortografar seu Markdown em conjunto md elementos. A livraria formatará seu Markdown maquinalmente 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 encetar é fazer referência à livraria no site solene do md-block:

<script type="module" 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 juntar levante código ao seu cabeça e sua página renderizará maquinalmente qualquer coisa em um elemento md-block para HTML:

Exemplos de vários comandos Markdown formatados em HTML

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

npm install md-block

Blocos de remarcação vs. remarcação em risco

O elemento padrão, nomeado em seguida a própria livraria, é conjunto md. Mas você também pode usar um md-span elemento para Markdown encastoado, uma vez que texto no meio de uma frase:

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

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

Uma vez que Sintaxe Sobresair Blocos de Código Markdown Com Prism

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

Portanto, com levante 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 muito formatado com destaque sintaticamente consciente:

Um exemplo de código Markdown renderizado como um bloco destacado de sintaxe

Suas opções para ortografar online exclusivamente aumentaram

Uma vez que 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 ligeiro para escritores que estão confiantes em usar Markdown, mas não HTML.

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