Como converter Markdown para HTML usando Marked

MARKDOWN

O Markdown é uma forma de escrevermos documentação que foi popularizada pelo Github (e que é uma mão na roda, diga-se de passagem)Com ele, podemos pegar um texto e criar algumas marcações, o que gera uma interface mais organizada, sem perigo de existir sujeiras provenientes do Word por exemplo.

 

1 – Usando o módulo Marked

Para entender como o Markdown funciona, vamos fazer um hands-on no módulo chamado Marked, que tem a função de converter Markdown para HTML.

Primeiro, vamos criar um arquivo novo para testarmos (vou chamar o meu de teste.js)

 

2 – Importando o Marked

Com o arquivo aberto, vamos dar um Require chamando o módulo  Marked

 

 

3 – Rodando o arquivo

Ao dar node no arquivo teste.js, perceba que ele vai retornar

 

 

O # trás pra gente a tag H1, podemos usar 2 # por exemplo e ele nos retornaria a tag H2

 

4 – Por que usar o Markdown?

Com ele, conseguimos colocar esses textos de forma mais limpa e também plugarmos renderes nele.

Por exemplo, quando renderizar o H1, quero que seja um pouco diferente. Se colocarmos um texto formatado, poderia converter isso em view no react native, text, HTML, etc.

Exemplo:

 

 

Lembrando que ao criar um renderer temos que avisar o marked que estamos criando um renderer diferente. Neste caso, como ele é um Heading, vamos chamar o  renderer.heading. Novamente, para visualizarmos o que foi feito, vamos dar um node teste.js e ele vai retornar pra gente:

 

Com isso, o Marked sabe que o texto que eu quero é o Teste, e o level que eu quero é o 2, ou no caso a heading tag H2. Eu consigo retornar uma fontSize maior como no exemplo abaixo:

 

Checando obviamente o level e por aí vai. Assim podemos gerar uma interface que vai ser reproduzida de forma igual tanto no react native quanto na Web, já que é possível converter para HTML e estaria tudo rodando normalmente.

 

5 – Concluindo

Venho usando bastante Markdown para documentação. Uma outra ideia interessante seria pegar esse HTML gerado pelo Markdown e, a partir dele, gerar um PDF para salvar isso para outros desenvolvedores. 

Marked é uma forma que temos no Node de converter o Markdown em HTML, mas também podemos utilizá-lo no browser.

 

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!