Como adicionar Markdown no ReactJs com NextJs + Prismic e Teste Banner

"Passo a passo para melhorar o blog."

28 Dez 2021

Gabriel Lopes

1 min

* editado em 6 Fev 2022, às 17:18

Adicionando campo de markdown no Prismic

Para adicionar o campo de código no prismic basta acessar a aba de Custom Types e editar o módulo de posts. Adicionar no content a baixo do body um RichText com apenas o Preformatted selecionado, como a imagem:

adicionando campo de RitchText no prismic

Bibliotecas necessárias

Agora, antes de renderizar no blog o markdown precisaremos de duas bibliotecas, react-syntax-highlighter e react-markdown, porém o react-markdown deverá ser instalado com uma versão mais antiga:

yarn add react-syntax-highlighter react-markdown@6.0.3

Instalando a tipagem:

yarn add @types/react-syntax-highlighter -D

Renderizando o código em markdown

Primeiro precisamos pegar o texto em markdown do prismic, basta adicionar ele na requisição.

...
markdown: RichText.asText(content.markdown) ?? null,
// Adicione como tipo string na interface
...

Agora as importações das bibliotecas, existem muitos temas de cores no react-syntax-highlighter, no meu eu escolhi o tema dracula.

import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism'

Por fim, dentro do mapeamento do content basta adicionar o código a baixo

{post.data.content.map(content => { 
   return (
      ...
      <ReactMarkdown
        children={content.markdown}
        components={{
           code({ inline, className, children }) {
             const match = /language-(\w+)/.exec(className || '')
             return !inline && match ? (
                <SyntaxHighlighter
                  children={String(children).replace(/\n$/, '')}
                  style={dracula}
                  language={match[1]}
                  PreTag="div"
                />
             ) : (
                <code className={className}>
                   {children}
                </code>
             )
           }
        }}
      />
      ...
   )
})}

Teste

Agora basta adicionar algum markdown no prismic e testar.

editando post no prismic

markdown renderizado no blog