Procurando exibir blocos de código em seu aplicativo React? Siga este guia para integrar blocos de código com destaque de sintaxe em seu aplicativo.

No desenvolvimento da Web, exibir blocos de código com formatação e realce adequados é um requisito comum. Os blocos de código são uma ferramenta versátil que pode ser usada para diversas finalidades, incluindo exibir código e melhorar o envolvimento do usuário.

Instalando a Biblioteca

Primeiro, criar um aplicativo React e instale o blocos de código de reação biblioteca. Esta biblioteca é usada para exibir blocos de código em seu aplicativo. Você pode instalar esta biblioteca usando npm, o gerenciador de pacotes para Node.js. Abra seu terminal e navegue até o diretório do seu projeto. Em seguida, execute o seguinte comando:

npm install react-code-blocks

Isso instalará a biblioteca react-code-blocks em seu projeto.

Adicionando o bloco de código ao seu projeto

Depois de instalar a biblioteca react-code-blocks, você está pronto para começar. Primeiro, importe o

CodeBlock componente da biblioteca react-code-blocks em seu aplicativo. Você pode fazer isso adicionando o seguinte código ao seu arquivo:

importar { Bloco de código } de"react-code-blocks";

Em seguida, use o componente CodeBlock em seu aplicativo adicionando o seguinte código:

 texto='console.log("Olá, mundo!");'
 idioma='javascript'
 showLineNumbers={verdadeiro}
 tema={seuTema}
/>

No código acima, você está passando vários props para o componente CodeBlock. Aqui está uma lista de todos os adereços disponíveis:

  • texto (obrigatório): O código a ser exibido no bloco de código.
  • idioma (obrigatório): A linguagem de programação do código. Isso é usado para realce de sintaxe do bloco de código.
  • showLineNumbers:Um valor booleano que indica se os números de linha devem ser exibidos no bloco de código ou não. O padrão é falso.
  • tema:O tema a ser usado para o bloco de código. Pode ser um tema integrado ou um objeto de tema personalizado. O padrão é o GitHub.
  • número da linha inicial: O número da linha a partir do qual iniciar a contagem. O padrão é 1.
  • bloco de código: Um objeto contendo opções para o bloco de código. Isso pode incluir números de linha (um booleano indicando se deve exibir números de linha ou não) e wrapLines (um booleano indicando se as linhas devem ser quebradas ou não).
  • ao clicar: Uma função a ser chamada quando o bloco de código é clicado.

Aqui está um exemplo de como usar todos esses adereços:

importar { Bloco de código } de"react-code-blocks";
funçãoMeuComponente() {
const handleClick = () => {
console.registro("Bloco de código clicado");
 };
retornar (
 texto='const saudação = "Olá, mundo!"; console.log (saudação);'
 idioma='javascript'
 showLineNumbers={verdadeiro}
 tema='átomo-um-escuro'
 inicialLineNumber={10}
 codeBlock={{ números de linha: falso, wrapLines: verdadeiro }}
 onClick={handleClick}
 />
 );
}

No código acima, você está usando átomo-um-escuro tema, iniciando os números de linha em 10, desabilitando números de linha, habilitando quebra de linha e anexando um manipulador de clique.

Ao usar esses adereços, você pode personalizar a aparência e o comportamento de seus blocos de código para atender às suas necessidades.

Adicionando temas em seus blocos de código

A biblioteca react-code-blocks fornece uma variedade de temas integrados que podem ser usados ​​para personalizar a aparência de seus blocos de código. Para usar um tema integrado, basta especificar o nome do tema no tema suporte. Por exemplo, para usar o átomo-um-escuro tema, você usaria o seguinte código:

 texto='console.log("Olá, mundo!");'
 idioma='javascript'
 showLineNumbers={verdadeiro}
 tema='átomo-um-escuro'
/>

Além dos temas integrados, você também pode criar temas personalizados definindo um objeto JavaScript que especifica as cores a serem usadas em diferentes partes do bloco de código. Aqui está um exemplo da aparência de um objeto de tema personalizado:

const meuTemaPersonalizado = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 cor de fundo: "#222",
 cor do texto: "#ccc",
 substringCor: "#00ff00",
 palavra-chaveCor: "#0077ff",
 atributoCor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nomeCor: "#f8f8f8",
 builtInColor: "#0077ff",
 literalCor: "#ffaa00",
 balaCor: "#ffaa00",
 códigoCor: "#ccc",
 adiçãoCor: "#00ff00",
 regexpColor: "#f8f8f8",
 símboloCor: "#ffaa00",
 variávelCor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 cor do link: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 tipoCor: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 citaçãoCor: "#f8f8f8",
 templateTagColor: "#ccc",
 deleçãoCor: "#ff0000",
 tituloCor: "#0077ff",
 seçãoCor: "#0077ff",
 comentárioCor: "#777",
 metaKeywordColor: "#f8f8f8",
 metaCor: "#aa00ff",
 funçãoCor: "#0077ff",
 númeroCor: "#ffaa00",
};

Para usar um tema customizado, você passaria o objeto do tema como prop do componente CodeBlock:

 texto='console.log("Olá, mundo!");'
 idioma='javascript'
 showLineNumbers={verdadeiro}
 tema={meuTemaPersonalizado}
/>

Abaixo está a saída:

Usando temas integrados e personalizados, você pode personalizar a aparência de seus blocos de código para atender às suas necessidades e ao design geral do seu aplicativo.

Adicionando CopyBlock ao seu projeto

Se você deseja adicionar a funcionalidade de cópia aos seus blocos de código, pode usar o CopyBlock componente fornecido pela biblioteca react-code-blocks. Para usar este componente, você precisará instalar o reagir-copiar-para-área de transferência biblioteca também. Veja como adicionar o componente CopyBlock ao seu projeto:

Instale o reagir-copiar-para-área de transferência biblioteca:

npm install reagir-copiar-para-área de transferência

Importe os componentes e bibliotecas necessários:

importar { Copiar Bloco } de'react-code-blocks';
importar { FaCopy } de'ícones de reação/fa';
importar cópia de de'copiar para área de transferência';

Use o componente CopyBlock em seu código:

const código = 'console.log("Olá, mundo!");';
const idioma = 'javascript';
 texto={código}
 idioma={idioma}
 showLineNumbers={verdadeiro}
 wrapLines={verdadeiro}
 tema='Drácula'
 bloco de código
 ícone={}
 onCopy={() => copiar (código)}
/>

Abaixo está a saída:

Ao adicionar o componente CopyBlock ao seu projeto, você pode facilmente permitir que os usuários copiem o código de seus blocos de código para a área de transferência.

Métodos alternativos para adicionar blocos de código

Embora usar a biblioteca react-code-blocks seja a maneira mais direta de adicionar blocos de código ao seu aplicativo React, também existem alguns métodos alternativos que você pode usar:

  1. Adicionando manualmente realce de sintaxe: Se você não quiser usar uma biblioteca, pode adicionar manualmente realce de sintaxe ao seu código usando Tailwind CSS ou CSS normal. Isso envolve adicionar classes CSS aos seus elementos de código para aplicar os estilos apropriados. Embora esse método lhe dê mais controle sobre os estilos, pode ser demorado para configurar e manter.
  2. Usando outras bibliotecas: Existem várias outras bibliotecas disponíveis que fornecem realce de sintaxe para código, como realçador de sintaxe de reação, prism-react-renderer, e destaque.js. Essas bibliotecas têm recursos e estilos diferentes, para que você possa escolher uma que atenda às suas necessidades.

Embora a biblioteca react-code-blocks seja uma ótima opção para a maioria dos aplicativos, esses métodos alternativos podem ser úteis em determinadas situações. Por fim, o método escolhido dependerá de suas necessidades e preferências específicas.

Melhore o envolvimento do usuário com blocos de código

Usando blocos de código para explicar o código, fornecendo exemplos de codificação interativos e criando visualmente designs atraentes, você pode melhorar a experiência de seus usuários e mantê-los envolvidos com seu site ou aplicativo. Além disso, usando recursos como CopyBlock e temas personalizados, você pode tornar seu aplicativo React ainda mais funcional e atraente.