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.
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
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.
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.
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.
Ele também possui um painel de configurações gerais, mas é possível alterar algumas delas por bloco.
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 Plugin | Bloco independente | Destaca linhas | Exibe número de linhas | Título | Mais de um estilo | Clique 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.
