Criação de Posts com MDX

Ao criar meu site, queria uma forma de escrever posts com conteúdo dinâmico e de fácil formatação. Para isso, descobri o conteúdo do Hamed Bahram sobre como aplicar MDX em um site Next.js.

O que é MDX?

MDX é uma ferramenta que permite escrever markdown com JSX. Isso permite que você escreva componentes React dentro do seu markdown. Isso é muito útil para criar posts com conteúdo dinâmico em um blog, por exemplo.

export function HelloWorld() {
  return <h1>Hello, World!</h1>
}

Como usar MDX?

Biblioteca

Para usar MDX, você precisa de um compilador que transforme o seu markdown com JSX em um arquivo JavaScript. Como esse site foi desenvolvido em NextJS, estamos utilizando a biblioteca next-mdx-remote.

Aplicação

const content = `
## Escrita em Markdown
`
return (
  <div>
    <MDXRemote source={content} />
  </div>
)

Porém, dessa forma os code-snippets não terão syntax highlight. Para isso, foi utilizada a biblioteca sugar-high.

Criamos uma função que recebe o conteúdo em markdown, detecta o que há dentro de code-snippets e aplica o syntax highlight.

function Code({ children, ...props }: any) {
  let codeHTML = highlight(children)
  return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
}

const components = {
  code: Code
}

export default function MDXContent(
  props: JSX.IntrinsicAttributes & MDXRemoteProps
) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
    />
  )
}

Assim, envolvemos nosso markdwon dentro do componente MDXContent e ele irá aplicar o syntax highlight nos code-snippets.

  <div>
    <MDXContent source={content} />
  </div>

Estilização

Para estilizar o conteúdo do markdown, utilizamos um plugin do TailwindCSS chamado Typography. Já para os code-snippets, foi adicionado ao globals.css as variáveis de cor que o sugar-high utiliza.

Conclusão

Com o MDX, é possível criar posts com conteúdo dinâmico e de fácil formatação. Além disso, é possível adicionar code-snippets estilizados dentro do markdown, o que torna a escrita de posts mais flexível e poderosa.