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.

Qual a importância da linha de comando ou console para web designers?

A linha de comando, ou console, é onde se pode fornecer uma sequência de comandos, para executar um aplicativo ou vários, realizar uma tarefa ou uma sequência de tarefas etc.
Amparados por parâmetros, opções e cláusulas os comandos, dados no console ou no terminal, têm uma enorme (quase infinita) flexibilidade.
Command line tools for web design cover picture

Administradores de sistemas, desenvolvedores, hackers, autores etc. já descobriram o “poder divinal” que um terminal oferece a quem se dispõe a aprender a dominá-lo.

Mas, enfim… qual a utilidade ou a importância desta ferramenta a um web designer?
Se por um lado, a interface gráfica tem um grande apelo visual e facilidade de uso, ela também prejudica a flexibilidade e a agilidade — nenhum designer de interface “enche a tela” de botões para realizar uma determinada tarefa de n maneiras diferentes.
Além disto, a interface gráfica é comumente lenta em computadores mais antigos — o que implica na demora para iniciar a execução de alguma atividade.
O terminal permite determinar exatamente como se deseja que uma tarefa (ou uma sequência de tarefas) seja executada e ela começa a partir do momento em que você dá Enter.

Não abro mão da flexibilidade e da agilidade que só o terminal proporciona. É uma ferramenta que eleva exponencialmente o meu nível de controle sobre o sistema.

Terminal do Linux, do Windows ou do MacOS?

Se você ainda não usa o GNU/Linux, no seu trabalho, insisto: você deveria começar a considerar seriamente esta opção profissional — que te pode possibilitar trabalhar com softwares 100% legalizados a custos muito baixos ou gratuitos.
O terminal do Windows também oferece uma razoável dose de flexibilidade. O sistema, contudo, foi desenhado para que se usassem apenas as opções da interface gráfica. O processo de “castração” do terminal DOS, começou a partir do Windows 3.0 (Maio/1990) e tem se fortalecido até os dias de hoje.
A Microsoft tem se esforçados para esconder o terminal do usuário, como se fosse um parente indesejável.
O MacOS foi construído sobre a plataforma Unix FreeBSD e tem um terminal poderoso. A cultura dos usuários, incentivados pelo departamento de marketing da Apple constitui uma forte barreira para seu uso. Mas ele está lá. 😉
Usuários do MacOS X podem usar o Homebrew para instalar as ferramentas que não são parte do pacote de aplicativos padrão.
O Linux, como estes outros sistemas operacionais, também veio do ambiente em caracteres e evoluiu para o uso predominante da interface gráfica.
O Linux, contudo, convive muito bem com o uso do terminal. Todas as grandes distribuições oferecem facilidades de acesso ao console.
Embora haja ferramentas visuais sofisticadas para instalar softwares, muitos usuários Linux se sentem muito à vontade para instalar seus aplicativos com as ferramentas de linha de comando, como o apt-get — sendo que, na maioria das vezes, lhes basta copiar e colar a instrução de um site no seu terminal, podendo fazer as mudanças que achar pertinentes, se for o caso.
Encontre mais artigos sobre o uso do apt-get, na caixa de busca deste site.

O que há na linha de comando para profissionais do web design?

Há muito que um webdesigner já faz, usando a interface gráfica, que pode ser feito na linha de comando.
Eu sou um evangelista do uso do software livre e do uso de comandos no terminal — mas eu entendo, veja bem, que você deva usar sempre o que lhe oferecer os melhores resultados.
Tudo o que este artigo pede é que você abra os olhos para o terminal do seu sistema e veja (com generosidade e sem preconceitos) se há lá alguma coisa que lhe possa ser útil. Só isso.
Veja alguns pontos que Cadmin’s blog elenca como favoráveis ao uso do terminal:

  • O uso de pacotes de softwares de terceiros se torna invisível — Webdesigners usam vários pacotes de terceiros, tais como o Bootstrap, jQuery, Normalize.css etc.
    A gestão de pacotes, contudo, é muito morosa, quando feita manualmente.
    Com o uso do terminal, é possível inserir os pacotes requeridos pelo seu projeto com alguns comandos: bower install jquery, bower update jquery
  • Para quem não sabe, o Bower é um gestor de pacotes, semelhante ao apt-get ou o PIP.

  • No terminal, compilar é muito mais rápido — HTML, CSS e JavaScript são 3 linguagens sempre presentes em projetos de design web, entre outras. As ferramentas da linha de comando tornam a produção e entrega de código mais eficiente nestas linguagens.
    Eventualmente, compilar pré-processadores, é muito mais rápido na linha de comando.
  • Ferramentas de teste de sites — Há várias ferramentas de teste da rede e da eficiência de seu website ou do provedor em que ele se encontra hospedado, que podem ser invocadas do terminal — não somente as opções de execução, mas também as informações fornecidas, são extremamente flexíveis e maleáveis.

Uma vez iniciado o uso da linha de comando, você adquire o costume e um mundo novo de possibilidades surge, ao alcance de seus dedos.

Referências

Site oficial do Bower: bower.io
How important is command line for web designers — http://auckland.fortuneinnovations.com/how-important-command-line-web-designers
Command line tools for frontend developers — http://seesparkbox.com/foundry/command_line_tools_for_frontend_developers

Como produzir saída em HTML a partir de uma tabela MySQL

Um relatório MySQL em formato HTML pode facilitar muito a exibição de resultados de consultas em uma página web. A solução pode poupar tempo precioso em um projeto de webdesign.
MySQL and HTML5 logos
Neste artigo vou mostrar como isto pode ser feito da maneira mais eficiente para entregar código HTML pronto para ser usado em uma página estática. Devo advertir que, se você deseja criar scripts que entreguem páginas dinâmicas em HTML, há maneiras mais eficientes de se fazer isto — o que torna esta solução, aqui, inadequada para este tipo de demanda.
O MySQL pode produzir a saída no formato de tabelas HTML com o uso da opção -H ou --html (à sua escolha).
Veja, abaixo, a diferença ente o formato tabular normal no MySQL e o formato de tabelas HTML provido pelo MySQL.

mysql -e "SELECT * FROM cliente WHERE conta=0" caixa
+------------+------+------+
| nome       | conta|  id  |
+------------+------+------+
| Antonio    |0     |10    |
| Osvaldo    |0     |8     |
| Socrate    |0     |0     |
| Arthur     |0     |1     |
+------------+------+------+
mysql -H -e "SELECT * FROM cliente WHERE conta=0" caixa
<TABLE BORDER=1><TR><TH>nome</TH><TH>conta</TH><TH>id</TH></TR>
<TR><TD>Antonio</TD><TD>0</TD><TD>10</TD></TR>
<TR><TD>Osvaldo</TD><TD>0</TD><TD>8</TD></TR>
<TR><TD>Socrates</TD><TD>0</TD><TD>0</TD></TR>
<TR><TD>Arthur</TD><TD>0</TD><TD>1</TD></TR>
</TABLE>

* Texto colorido para melhorar a legibilidade. O resultado no cliente MySQL é monocromático.
Você não pode obter saídas em HTML a partir dos resultados das queries obtidas com UPDATE ou INSERT, uma vez que não geram saída de resultados em tabelas.

Como obter a saída de resultados MySQL em XML

Com a variante -X é possível resolver este problema. Veja:

mysql -X -e "SELECT * FROM cliente WHERE conta=0" caixa
<?xml version="1.0"?>
<resultset statement="SELECT * FROM cliente WHERE conta=0">
<row>
<thing>Antonio</thing>
<legs>0</legs>
<arms>10</arms>
</row>
<row>
<thing>Osvaldo</thing>
<legs>0</legs>
<arms>8</arms>
</row>
<row>
<thing>Socrates</thing>
<legs>0</legs>
<arms>0</arms>
</row>
<row>
<thing>Arthur</thing>
<legs>0</legs>
<arms>1</arms>
</row>
</resultset>

* Texto colorido para melhorar a legibilidade. O resultado no cliente MySQL é monocromático.
Você pode usar tanto a opção -X como --xml — opte pelo que for mais adequado para você.