nome

Highlight de código no WordPress? Vá de SyntaxHighlighter Evolved

Publicado em 13 de dezembro de 2018
Autor: Mateus Ávila Isidoro

Estou utilizando o WordPress 5.0.1, e testando o Editor Gutenberg na produção das postagens deste blog. Por enquanto, fiz postagens focadas no mundo front-end, mas um dos objetivos é compartilhar códigos e alguns experimentos.

Fazendo um teste no meu ambiente local, percebi que o gerador de código do Gutenberg não vem com highlight de fábrica, o que dificulta a visualização de códigos. Para resolver este problema, encontrei o excelente plugin SyntaxHighlighter Evolved que facilita enormemente a geração de códigos.

Para instalar este plugin, basta instalar o plugin, ir na postagem desejada do wordpress, e escolher o campo Syntax Highlighter, e depois adicionar o código.

Escolha o campo SyntaxHighlighter Code. O Código ao lado não tem as vantagens deste plugin ainda.

Após clicar nele, vai surgir um campo igual a este abaixo:

Este é o box de código do plugin.

Insira o código desejado, e no canto direito, escolha a linguagem que você quer que ele exiba:

Algumas linguagens ele já disponibilizou pra gente, mas há outros plugins para adicionar novas linguagens a este plugin

E depois de finalizar, basta salvar. Abaixo eu vou deixar um código de css e de js de teste:

Um código simples no CSS.

.box{
   display: inline-block;
   background: #321312;
   color: #ddd;
   width: 100px;
   height: 50px;
   line-height: 50px;
}

Um código de teste em javascript:

let people = {
   name: 'Mateus',
   email: 'mateus@mateusavila.com.br',
   blog: 'https://www.mateusavila.com.br/pt/blog'
}

Mais informações