NextJS

Front-End

Como destacar seu bloco de código usando Highlight.js + Next.js

Imagem de Perfil de Roberto Brito Fernandes

Roberto Brito Fernandes

Desenvolvedor Front End

Texto escrito "Destaque seu bloco de código usando Highlight.js em uma aplicação Next.js". Ao lado contendo o logo do HilightJs com um sinal de mais e ao lado o logo do NextJS. Ao fundo uma foto de um editor de código.

Se você tem um blog ou uma landing page com trechos de código, certamente deseja destacar esses códigos da mesma maneira que fazemos em Ambientes de Desenvolvimento Integrado (IDEs), certo? No entanto, esse destaque pode ser uma tarefa manual e trabalhosa, envolvendo a aplicação de estilos através de classes distintas dentro das tags <pre> e <code>. Se estiver utilizando o Next JS, ainda é necessário garantir que o código seja renderizado no servidor, o que adiciona mais complexidade à estilização. No entanto, para simplificar esse processo, estou compartilhando uma abordagem prática e eficiente para resolver esse desafio.

Instalando o pacote Highlight.js

Vamos usar apenas o pacote Highlight.js para a estilização do nosso trecho de código. Ele contém suporte client-side e server-side. Vamos instalar seu pacote node, executando:

yarn add highlight.js

Use seu gerenciador de pacote preferido, eu estou usando yarn

Agora, crie um componente src/components/HighlightCode.ts e registre as linguagens que o pacote irá reconhecer no trecho HTML. No exemplo abaixo, estou começando com TypeScript e JavaScript, mas a biblioteca oferece suporte para mais de 240 linguagens registradas atualmente. Vejamos o código:

import hljs from 'highlight.js/lib/core';
import typescript from 'highlight.js/lib/languages/typescript';
import javascript from 'highlight.js/lib/languages/javascript';

hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('javascript', javascript);

Inicializando o Highlight.js

Agora que registramos as linguagens da biblioteca, precisamos executá-lo utilizando hljs.highlightAll() quando a página é renderizada. utilizaremos o useEffect. Caso esteja usando Next 13+, não esqueca de inserir o 'use client' para usar a hidratação do React sem problemas. Além disso, é necessário incluir a folha de estilos da biblioteca, onde há diversos temas. Você pode encontrá-los em node_mudules/highlight.js/styles. No meu caso, utilizei o tema github-dark. Veja como ficou:

'use client';

import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
import typescript from 'highlight.js/lib/languages/typescript';

import React, { useEffect } from 'react';
import 'highlight.js/styles/github-dark.css';

hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('xml', xml);

const HighlightCode = ({ content }) => {
    useEffect(() => {
        hljs.highlightAll();
    }, []);

		// ou retorne seu JSX aqui
    return <div dangerouslySetInnerHTML={{ __html: content }} />
};

export default HighlightCode;

Entendendo as duas principais funções: highlightAll() e highlight()

É importante entender que existem duas maneiras de executar o pacote do highlight. A primeira é usando a função hljs.highlightAll(), como no exemplo que passei. Mas, também existe a função hljs.highlight(). Suas diferenças são:

hljs.highlightAll():

  • Esta função é usada para realçar todos os blocos de código presentes em uma página web.
  • Normalmente, você chamaria essa função quando a página é carregada para realçar automaticamente todos os trechos de código detectados.
  • É útil quando você tem vários blocos de código em uma página e deseja destacar todos eles de uma vez.

hljs.highlight(language, code):

  • Esta função é usada para realçar um bloco de código específico.
  • Você precisa fornecer a linguagem (language) do código e o próprio código (code) como argumentos para a função.
  • Pode ser útil quando você tem apenas um bloco de código em uma página e deseja destacá-lo manualmente.

Aqui está um exemplo breve utilizando essa segunda função:

import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';

export default function YourPageNextJS() {
	const code = `
      export default function Example() {
          return (
              <div>
                  <span>Exemplo</span>
              </div>
          );
      }
  `;
  const highlightedCode = hljs.highlight(code, { language: 'typescript' }).value;
	
	return (
		<div>
		    <h1>Veja esse trecho de código:</h1>
			<div
	             dangerouslySetInnerHTML={{
	                 __html: highlightedCode
	             }}
	        />
		</div>
	)
}

É isso, espero que esse artigo seja útil. Você pode aprender mais sobre o Highlight.js acessando sua documentação.

Compartilhe