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.