Como adicionar realce de sintaxe a um bloco de código no React

Um dos principais recursos de um blog de programação são os blocos de código. Você não precisa formatá-los usando um marcador de sintaxe, mas faz com que seus blogs pareçam muito mais bonitos se você fizer isso. Também pode melhorar a legibilidade do seu código.

Este artigo mostrará como usar o react-syntax-highlighter para destacar blocos de código no React. Você criará um componente de bloco de código capaz de destacar o código passado para ele usando a sintaxe do idioma fornecido.

Realce de sintaxe com realce de sintaxe de reação

O marcador de sintaxe react permite destacar o código usando o React. Ao contrário de outros marcadores de sintaxe, react-syntax-highlighter não depende de ComponentDidUpdate ou ComponentDidMount para inserir o código destacado no DOM usando perigosamenteSetInnerHTML.

Essa abordagem é perigosa porque expõe um aplicativo a ataques de script entre sites.

Em vez disso, ele usa uma árvore de sintaxe para construir o DOM virtual e o atualiza apenas com alterações.

O componente usa PrismJS e Highlight.js em segundo plano. Você pode optar por usar qualquer um para destacar seu código. É muito fácil de usar, pois oferece um estilo fora da caixa.

O componente react-syntax-highlighter aceita o código, linguagem e estilo como props. O componente também aceita outras opções de personalização. Você pode encontrá-los no react documentação do marcador de sintaxe.

Usando o componente react-syntax-highlighter

Para começar a usar o marcador de sintaxe react no React, instale-o via npm.

npm instalar react-syntax-highlighter --Salve 

Crie um novo componente chamado CodeBlock.js em seu aplicativo React e importe react-syntax-highlighter:

importar SyntaxHighlighter a partir de 'react-syntax-highlighter';
importar {doc.} a partir de 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
Retorna (
<SintaxeLinguagem de destaque="javascript" estilo={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

O componente SyntaxHighlighter aceita a linguagem e o estilo a ser usado. Ele também recebe a string de código como seu conteúdo.

Você pode renderizar o componente acima da seguinte forma:

const Aplicativo = () => {
const codeString = `
const Quadrado = (n) => Retorna n * n
 `
Retorna(
<CodeBlock codestring={codeString}/>
 )
}

É importante observar que o uso do react-syntax-highlighter pode aumentar o tamanho da sua compilação, portanto, se você precisar, poderá importar a compilação da luz. A construção leve, no entanto, não possui estilos padrão.

Você também precisará importar e registrar os idiomas que deseja usando o registrarIdioma função exportada do light build.

importar { Leve Como SyntaxHighlighter } a partir de 'react-syntax-highlighter';
importar js a partir de 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SintaxeHighlighter.registerIdioma('javascript', j);

Este componente usa Highlight.js para destacar o código.

Para usar o PrismJS, importe-o do pacote react-syntax-highlighter assim:

importar { Prisma Como SyntaxHighlighter } a partir de "react-syntax-highlighter";
importar { vscDarkPlus } a partir de "react-syntax-highlighter/dist/esm/styles/prism";

Para a construção do prism light, importe o PrismLight e registre o idioma que você está usando.

importar { PrismLight Como SyntaxHighlighter } a partir de 'react-syntax-highlighter';
importar jsx a partir de 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importar prisma a partir de 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SintaxeHighlighter.registerIdioma('jsx', js);

Usar prism é benéfico, especialmente ao destacar jsx porque react-syntax-highlighter não o suporta totalmente.

Adicionando números de linha ao bloco de código

Agora que você sabe como destacar um bloco de código, pode começar a adicionar recursos extras, como números de linha.

Com react-syntax-highlighter, você só precisa passar showLineNumbers para o componente SyntaxHighlighter e defina-o como true.

<SintaxeLinguagem de destaque="javascript" style={docco} showLineNumbers="verdadeiro">
 {codeString}
</SyntaxHighlighter>

O componente agora mostrará números de linha ao lado de seu código.

Usando estilos personalizados em seu componente

Mesmo que o react-syntax-highlighter forneça estilo, às vezes você pode precisar personalizar seus blocos de código.

Para isso, o pacote permite que você passe inline Estilos CSS para o prop customStyle como mostrado abaixo:

<SintaxeLinguagem de destaque="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", cor de fundo: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

O bloco de código destacado terá um raio de borda personalizado e uma cor de fundo neste exemplo.

A importância do realce de sintaxe

Você pode usar o pacote react-syntax-highlighter para destacar o código no React. Você pode usar a versão light para reduzir o tamanho da compilação e personalizar blocos de código usando seus próprios estilos.

Destacar trechos de código faz com que seu código tenha uma boa aparência, melhora sua legibilidade e o torna mais acessível aos leitores.