Wordpress

Como destacar a sintaxe do seu código em um blog wordpress

O uso de realce de sintaxe, destaque de sintaxe ou, em inglês, syntax highlighting é muito usado para tornar a leitura de código fonte de scripts, programas ou comandos mais fácil.
Neste texto, pretendo mostrar 3 métodos práticos para obter este efeito na plataforma do WordPress (não sei como se faz isto no blogger etc.)
Um deles envolve o uso de plug in e pode ser o mais fácil de implementar. As outras 2 formas são mais leves, porém carecem da sofisticação do uso de um plug in específico.
Só para ficar claro, os métodos listados só foram testados no modo de escrita “texto puro”. Como nunca usei o editor “Visual” do WordPress, não sei se funcionam lá. 😉

Instale o plugin Syntax Highlighter Evolved

Desenvolvido pelo desenvolvedor russo, Alex Gorbatchev, o Syntax Highlighter Evolved, permite aplicar a sintaxe ao seu código, respeitando as mais diversas linguagens de programação.
De código aberto e com desenvolvimento ativo, o plug in pode ser instalado com o toque de um botão na tela, como qualquer outro.
syntax highlighter evolved screenshot
Faça busca pelo plug in na tela de instalação do painel administrativo do WordPress ou se dirija à pagina oficial do desenvolvedor, dentro da plataforma.
Este recurso é muito eficiente para destaque a cada linha de seu código. Além disto, funciona bem com a maioria dos temas do WordPress e fica bem na tela do celular.
Infelizmente, ele tem algumas desvantagens que precisam ser consideradas:

  • É um plug in a mais. Se você já está usando outros, este será mais um para adicionar problemas segurança e lentidão ao seu site.
  • Torna seu site lento. Mesmo que você não esteja exibindo qualquer código fonte em uma página, o plug in e seu javascript são sempre carregados.

O autor é bastante ativo no WordPress, responde bem bug reports e mantém o seu trabalho atualizado (embora já seja um código estável) — o que pode minimizar os problemas com segurança.

Configure o seu CSS para exibir código

Outra solução, descrita aqui, consiste em adicionar uma tag PRE, ao seu CSS — que da destaque geral ao código.

Exemplo de resultado da tag <pre>
long some_function();
/* int */ other_function();

/* int */ calling_function()
{
    long test1;
    register /* int */ test2;

    test1 = some_function();
    if (test1 > 0)
          test2 = 0;
    else
          test2 = other_function();
    return test2;
}

Como é possível ver, no exemplo acima, não há realce da sintaxe de cada peça do código, com o uso da tag ‘pre’.
O realce é para o código, como um todo.
Para aplicar esta solução, entre na sua conta do WordPress como administrador e entre no Painel de Controle da plataforma.
Em seguida, selecione o item Aparência/Editor, na coluna da esquerda.
captura de tela do wordpress - Aparência
Acrescente o seguinte código, ao arquivo ‘styles.css’:

pre {
    margin-bottom: 22px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	font-size: 12px;
	overflow: auto;
	background: #eee;
	padding: 10px;
	border: 1px solid #ddd;
	font-style: normal;
    font-weight: normal;
}

Depois de salvo, a tag poderá ser usada, da seguinte forma, dentro de qualquer texto:

<pre>
long some_function();
/* int */ other_function();

/* int */ calling_function()
{
long test1;
register /* int */ test2;

test1 = some_function();
if (test1 > 0)
test2 = 0;
else
test2 = other_function();
return test2;
}
</pre>


Use a tag <code>

Este método, tal como o anterior, pode não ficar muito bom na tela de um celular — dependendo do tema usado.
Mas, se tudo funcionar visualmente bem e você ficar satisfeito(a), use o que achar melhor.
O uso do ‘code’, obedece as mesmas regras do uso do ‘pre’.
Este método tem a vantagem de que você não precisa configurar ou instalar nada. É só usar.
Veja um exemplo do uso:
<code>
long some_function();
/* int */ other_function();

/* int */ calling_function()
{
long test1;
register /* int */ test2;

test1 = some_function();
if (test1 > 0)
test2 = 0;
else
test2 = other_function();
return test2;
}
</code>


Veja o resultado, abaixo:
long some_function();
/* int */ other_function();

/* int */ calling_function()
{
long test1;
register /* int */ test2;

test1 = some_function();
if (test1 > 0)
test2 = 0;
else
test2 = other_function();
return test2;
}


A tag ‘code’ é descrita no arquivo ‘style.css’ e você pode fazer alterações nela, se quiser.
Se prefere usar algum outro método para realçar o código que você publica no WordPress, conte-nos mais sobre o assunto, nos comentários.

Publicado por

Elias Praciano

Autor de tecnologia (livre, de preferência), apaixonado por programação e astronomia. Fã de séries, como "Rick and Morty" e "BoJack Horseman". Me siga no Twitter e vamos trocar ideias!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *