O Code Highlighter (Code Syntax Highlighter Addon / Widget for Elementor & WordPress) é uma extensão e componente visual complementar para WordPress e Elementor, desenvolvido sob medida para desenvolvedores de software, engenheiros de dados, criadores de tutoriais técnicos, escolas de programação, documentações de APIs/softwares e blogs de tecnologia que precisam exibir trechos de código-fonte (code snippets) formatados com realce de sintaxe profissional, numeração de linhas e alto contraste, sem que o código quebre o layout da página ou perca a indentação original.
Destaques:
- Realce de Sintaxe Multi-Linguagem Profissional (Syntax Highlighting): Utiliza motores de renderização consolidados e de alta precisão (como Prism.js ou Highlight.js) para colorir palavras-chave, variáveis, funções, strings, comentários e operadores de dezenas de linguagens e tecnologias (JavaScript, TypeScript, Python, HTML/CSS, PHP, SQL, Bash/Shell, JSON, YAML, Rust, Go, C/C++, Java, entre outras), proporcionando legibilidade idêntica à de editores de código modernos.
- Integração Nativa com o Editor Visual do Elementor (Widget Dedicado): Adiciona um componente arrastar-e-soltar (drag-and-drop) diretamente ao painel lateral do construtor, permitindo colar trechos de código em uma área de texto dedicada, selecionar a linguagem correspondente e personalizar estilos diretamente pelas abas nativas de conteúdo e estilo, sem necessidade de editar arquivos PHP do tema ou instalar shortcodes complexos.
- Recursos Especializados para Documentação Técnica e Código-Fonte:
- Botão de Cópia em Um Clique (Copy to Clipboard): Insere um botão interativo discreto no canto superior do bloco que permite ao leitor copiar todo o trecho de código diretamente para a área de transferência, exibindo feedback visual imediato (ex: “Copiado!”);
- Numeração de Linhas Configurável (Line Numbers): Alternador (toggle) para exibir ou ocultar a contagem de linhas na margem esquerda, com opção de definir o número da linha inicial (ideal para trechos que continuam de exemplos anteriores);
- Destaque de Linhas Específicas (Line Highlight): Permite enfatizar visualmente linhas ou intervalos de código fundamentais (ex: linhas 4-8) através de faixas de cor de fundo semitransparentes;
- Rótulo de Linguagem e Nome de Arquivo (Filename / Tab Badge): Campo para exibir o nome do arquivo que está sendo exemplificado (ex:
main.py,App.tsx,.env) ou uma etiqueta elegante com o nome da linguagem no cabeçalho do bloco; - Quebra de Linha vs. Rolagem Horizontal (Word Wrap / Horizontal Scroll): Controle para alternar entre quebra automática de linhas longas ou barra de rolagem horizontal suave com preservação estrita da indentação em tabs/espaços.
- Temas Visuais e Estilização Inspirada em IDEs Modernas:
- Temas Pré-Configurados Dark & Light: Suporte a paletas de cores consagradas do ecossistema de desenvolvimento (como One Dark Pro, Dracula, Monokai, Nord, Night Owl, GitHub Dark, VS Code Default e versões claras limpas);
- Tipografia Monoespaçada Customizada: Permite aplicar fontes monoespaçadas consagradas diretamente via Google Fonts ou fontes locais do sistema (JetBrains Mono, Fira Code com suporte a ligaduras de programação, Source Code Pro, Roboto Mono);
- Controle de Dimensões e Moldura: Ajuste de altura máxima com barra de rolagem vertical interna para blocos de código muito extensos, bordas arredondadas (border radius), margens internas (padding) e sombras suaves de elevação.