Você já deve conhecer a famosa linguagem markdown que é utilizada por diversos serviços conhecidos, tais como Notion, Discord e até o próprio Github faz uso dela em diversos recursos. Muita gente tem facilidade e afinidade com essa linguagem, e até mesmo visa implementar em alguma aplicação. Nesse post vamos aprender a fazer essa implementação.
Para isso vamos utilizar uma biblioteca chamada react-markdown e outra chamada react-syntax-highlighter.
Abra o terminal e digite:
npm i react-markdown react-syntax-highlighter
Para iniciar a configuração da renderização do markdown é muito simples. Você pode ir em qualquer página da sua aplicação e importar o componente ReactMarkdown.
import ReactMarkdown from "react-markdown";
Em qualquer lugar da página basta utilizar o ReactMarkdown passando na propriedade chilldren o conteúdo que você deseja renderizar.
<ReactMarkdown children={content} />
Você pode ver como o markdown formata o conteúdo aqui.