O formato Markdown é um grampo de longa data da comunidade de desenvolvedores. Desde 2004, temos usado o Markdown para criar conteúdo para várias plataformas, incluindo blogs, fóruns da web, aplicativos de bate-papo, editores WYSIWYG e muito mais.
Neste tutorial, mostraremos como renderizar com segurança Markdown de um componente React usando react-markdown.
O que é react-markdown?
react-markdown é um componente React que converte texto Markdown no código HTML correspondente. Ele é baseado em observação , que é um pré-processador Markdown.
permite o react-markdown você renderiza com segurança o markdown, porque ele não depende da propriedade hazardouslySetInnerHTML. Em vez disso, ele usa uma árvore de sintaxe para construir o DOM virtual.
Usar a propriedade HazardouslySetInnerHTML para analisar HTML é perigoso porque, se você não tiver certeza da fonte, pode injetar scripts maliciosos. Isso pode tornar seu software vulnerável a ataques de cross-site scripting (XSS) nos quais atores injetam código em aplicativos e sites benignos para enviar scripts maliciosos para usuários desavisados.
A linguagem Markdown foi projetada para ajudá-lo a criar conteúdo editorial facilmente. É por isso que inclui apenas tags básicas. react-markdown não suporta HTML por padrão e, portanto, evita injeções de script. Isso o torna seguro de usar.
Instalando react-markdown
Você pode instalar a biblioteca react-markdown usando npm:
npm install react-markdown
Como alternativa, você pode instalar a biblioteca usando yarn:
yarn add react-markdown
Você não precisa instalar nenhuma outra biblioteca para trabalhar com react-markdown. No entanto, existem alguns plug-ins que você pode usar opcionalmente para aprimorar seus recursos. Veremos esses plug-ins mais tarde.
Usando react-markdown: um exemplo simples
Visto que a biblioteca react-markdown fornece um componente, precisamos colocar nosso texto Markdown como filho iniciar. Isso então retornará o código HTML convertido.
Aqui está um exemplo:
import React from’react’import ReactMarkdown from’react-markdown’exportação função padrão MarkdownToHtml () {return (
A saída renderizada será “ React-Markdown is Awesome.”
Sintaxe de Markdown compatível
Abaixo está uma lista de sintaxe Markdown compatível com react-markdown sem a necessidade de usar nenhum plugin externo.
Usando plug-ins com react-markdown
Se você quiser ir além da sintaxe descrita acima, observação, o projeto pai de react-Mark para baixo, criou uma série de plug-ins que você pode usar para melhorar a funcionalidade da biblioteca.
Por exemplo, react-markdown não suporta links automáticos, tachado, tabelas, listas de tarefas, etc. por padrão. Se você já criou um arquivo leia-me no GitHub, pode ter criado listas de tarefas e tabelas usando Markdown. Para atender a essa necessidade, o comentário criado mark-gfm , que significa Github Flavored Markdown .
Para usar plug-ins, o react-markdown fornece dois props-markPlugins e rehypePlugins-que aceitam uma matriz de todos os plug-ins que você deseja usar. Você colocaria plug-ins de observação, como observação-gfm e observação-matemática, na propriedade ObservaçãoPlugin, e plug-ins de rehype, como rehype-katex, na propriedade rehypePlugins.
Se quiser oferecer suporte ao recurso tachado, por exemplo, você precisará usar o note-gfm. Vamos criar uma demonstração rápida para mostrar como isso funciona.
Primeiro, instale not-gfm:
npm install Observação-gfm
Agora você pode usá-lo em seu código:
importar React de’react’importar ReactMarkdown de’react-markdown’importar gfm de’observação-gfm’função padrão de exportação MarkdownToHtml () {return (
Agora, graças ao pluginnote-gfm, a saída será “ React-Markdown agora suporta ~~ tachado ~~.”
Se você deseja oferecer suporte a expressões matemáticas (como fórmulas escritas, equações, frações, etc.) ou KaTeX , uma biblioteca de composição matemática popular, você pode considerar o uso de observação-matemática e rehype-katex . Esses plug-ins permitem que você converta notações em linguagem geral em formatos matemáticos legíveis por humanos.
Aqui está um exemplo:
$$ L=\ frac {1} {2} \ rho v ^ 2 S C_L $$
O exemplo acima analisado com KaTeX ficaria assim:
Vá para a documentação oficial para obter uma lista completa de plug-ins de observação que você pode usar com react-markdown .
Sintaxe especial para o plug-in observação-gfm
A tabela abaixo mostra as funcionalidades especiais que você pode ativar usando o plug-in observação-gfm, incluindo a capacidade de criar tabelas , texto tachado e listas de tarefas pendentes.
Confira a demonstração ao vivo abaixo:
Tabela React-Markdown usando Remark-gfm de Akash Mittal ( @ akash-mittal )
em CodePen .
Conclusão
Neste tutorial react-markdown, aprendemos como renderizar com segurança a sintaxe Markdown para o HTML apropriado. Também revisamos como usar vários plug-ins, incluindo not-gfm, com react-markdown, passando-os para o componente fornecido.
