💻 WordPress

Plugins para exibir códigos estilizados (syntax highlighting) no editor de blocos (Gutenberg) do WordPress8 min leitura

Lista de plugins para fazer syntax highlighting em códigos dentro do conteúdo de um post ou página no WordPress.

Um dos requisitos para um blog que fala sobre programação é poder exibir trechos de códigos de uma forma que seja agradável e prática para o visitante. Por padrão o WordPress oferece um bloco de código, mas o mesmo não possui nenhum estilo ou opções como título do trecho e clique para copiar. Montei uma lista com alguns plugins que fazem a estilização de códigos (syntax highlighting) e criei uma tabela comparativa no final do post com as funcionalidades de cada um.

Plugin Syntax-highlighting Code Block (with Server-side Rendering)

O plugin utiliza o bloco nativo de código e oferece algumas opções de configurações por bloco, não sendo possível ter uma configuração global para todos os blocos. A estilização do código também é bem simples.

Opções do plugin Syntax-highlighting Code Block na tela de edição
Visualização do post com dois blocos de código com configurações diferentes do plugin Syntax-highlighting Code Block

O grande diferencial deste plugin é que ele faz a estilização no lado do servidor, não dependendo de bibliotecas JavaScript (como o Highlight.js or Prism.js) que fazem isso no frontend. Isso melhora a performance e evita rendering block. Além disso, permite que a funcionalidade seja compatível com o plugin oficial do AMP ou funcione normalmente caso o JavaScript esteja desativado no navegador.

No momento da publicação do post, o plugin não alterava o estilo do código dentro da edição do post ao mudar a linguagem ou selecionar as opções Show Line Numbers e Wrap Lines. Estas mudanças eram somente visíveis na visualização do post.

Bug com o plugin de cache Breeze

Dependendo da configuração do Breeze as linhas acima são exibidas quando a página é cacheada

Caso você tiver a opção de minificação do Breeze ativada, é necessário ativar todas as opções (HTML, CSS, JS, Incluir o JS inline, e Incluir o CSS inline) para que o bloco de código funcione corretamente. Caso contrário ele irá exibir essas linhas adicionais no seu código ao visitar a versão em cache da página.

Plugin Code Syntax Block

Este plugin possui um visual mais colorido, com diferentes estilos e a possibilidade de adicionar um título em cada bloco. Não é possível destacar linhas individuais do código e não há detecção automática da linguagem. Ele usa a biblioteca Prism.js para a estilização do código no frontend.

Opções do plugin Code Syntax Block na tela de edição
Visualização do post com dois blocos de código com configurações diferentes do plugin Code Syntax Block

Plugin SyntaxHighlighter Evolved

Conheci este plugin através de um post do WordPress Tavern, pois foi um dos primeiros a adicionar suporte ao Gutenberg. Diferente dos dois acima, ele possui um bloco próprio (independente), sendo possível a conversão do bloco nativo com apenas um clique. Ele também possui uma função que permite o visitante alterar temporariamente o código clicando duas vezes no mesmo. Não sei direito qual seria o motivo de fazer isso, pois provavelmente o código será colado no futuro em um editor de códigos.

Opções do plugin SyntaxHighlighter Evolved no painel administrativo
Visualização do post com dois blocos de código com configurações diferentes do plugin SyntaxHighlighter Evolved

Nos meus testes não consegui exibir o número de linhas no código nem alterar o espaçamento.

Plugin Highlighting Code Block

Este plugin também cria um bloco independente e possui a funcionalidade de clique para copiar.

Opções do plugin Highlighting Code Block no painel administrativo
Visualização do post com dois blocos de código com configurações diferentes do plugin Highlighting Code Block

Ele também possui um painel de configurações gerais, mas é possível alterar algumas delas por bloco.

Tela de configuração geral do plugin Highlighting Code Block

Tabela comparativa dos plugins de syntax highlighting

Para ficar mais fácil de visualizar as funcionalidades de cada um dos plugins, criei a tabela comparativa abaixo.

Nome do PluginBloco independenteDestaca linhasExibe número de linhasTítuloMais de um estiloClique para copiar
Syntax-highlighting Code Block (with Server-side Rendering)❌ Não✅ Sim✅ Sim❌ Não❌ Não❌ Não
Code Syntax Block❌ Não❌ Não✅ Sim✅ Sim, por bloco✅ Sim❌ Não
Plugin SyntaxHighlighter Evolved✅ Sim✅ Sim✅ Sim✅ Sim, geral✅ Sim❌ Não
Highlighting Code Block✅ Sim✅ Sim✅ Sim✅ Sim, por bloco✅ Sim✅ Sim

Além destes, também testei os seguintes plugins que não entraram na lista por conta de bugs ou falta de atualização: CodeMirror Blocks, Prismatic e Code Prettify.

Plugin complementar para adicionar clique para copiar

Para as soluções que não possuem a funcionalidade de clicar para copiar o código, é possível instalar o plugin Code Click-to-Copy by WPJohnny que adiciona a função em todos os conteúdos com <pre> e <code>.

Conclusão

Ainda não encontrei o meu plugin favorito para fazer a estilização do código, mas a pesquisa acima me ajudou a entender um pouco melhor as opções disponíveis no repositório do WordPress. Vou manter este conteúdo atualizado com as soluções que encontrar e se você souber de algum plugin gratuito interessante que não está na lista acima, deixe um comentário com o nome dele que vou adorar testá-lo.

Similar Posts

Você tem algo construtivo sobre este texto para dizer? Então comente abaixo