Rafael Campos de Bastiani

Inserindo syntax highlight dentro de um mdx

Vamos ver como inserir syntax highlight dentro de um conteúdo em mdx

O formato MDX nos permite escrever markdown ao mesmo tempo que escrevemos JSX.

Podemos usar 

import
e 
exports
também, exemplo:

# Hello, *world*!


Below is an example of JSX embedded in Markdown. <br /> **background color!**


<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX</h3>
</div>

E o resultado:

Hello, world!

Below is an example of JSX embedded in Markdown.
Background color!

This is JSX

Nosso foco aqui é ver como criar um componente que vai pegar nosso 

code
e gerar o syntax highlight.

Para mais informações de como configurar o MDX em seu projeto veja a documentação oficial https://mdxjs.com/getting-started

Vamos instalar o seguinte:

yarn add @mdx-js/react prism-react-renderer

Em seu arquivo 

App.js
faça o seguinte:

App.js

import { MDXProvider } from "@mdx-js/react";
// Código omitido
const components = {
  pre: (props) => <div {...props} />,
  code: (props) => <CodeBlock {...props} />, // <<<< CodeBlock que gera o syntax highlight
};
// Código omitido
<MDXProvider components={components}>
  <main {...props} />
</MDXProvider>;
// Código omitido

Exemplo completo App.

No código acima criamos um objeto chamado 

components
, é nele que passamos quais componentes vamos querer alterar na renderização do MDX.

Temos o 

<CodeBlock />
atribuído a tag html code, código completo CodeBlock:

CodeBlock:

import React from "react";
import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/nightOwl";


interface Props {
  children: string;
}


const CodeBlock = ({ children }: Props) => {
  return (
    <Highlight {...defaultProps} theme={theme} code={children} language="jsx">
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre
          className={className}
          style={{
            ...style,
            padding: "20px",
            fontSize: "15px",
            overflowY: "auto",
          }}
        >
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  );
};


export default CodeBlock;

Então, esse componente faz a mágica do syntax highlight, podemos atribuir um tema conforme foi feito aqui:

import theme from "prism-react-renderer/themes/nightOwl";

E no 

Highlight
atribuímos o 
theme
e o 
language
que nesse caso ficou como 
jsx
:

<Highlight {...defaultProps} theme={theme} code={children} language="jsx">

Agora no nosso arquivo MDX, quando quisermos inserir códigos, basta fazer assim: syntax into mdx

Mais informações sobre o syntax highlight https://mdxjs.com/guides/syntax-highlighting

Dúvidas? pode entrar em contato nos comentários que irei ajudar.