Diogo Besson :: tecnologia

Postando código-fonte formatado no wordpress

Postando código-fonte formatado no wordpress

Postando código-fonte formatado no wordpress te ajuda a deixar o texto do código fonte bem formatado dentro do seu post de blog no wordpress.

Ao começar este post, eu me lembrei de uma situação onde uma amiga havia questionado ingenuamente o conceito de código-fonte. Para os leigos, portanto, forneço a citação do Dicionário Eletrônico Houaiss (v.1.0.5a):

código-fonte

n substantivo masculino
Rubrica: informática.
sistema de símbolos utilizado para codificar o programa-fonte

E programa-fonte?

n substantivo masculino
Rubrica: informática.
programa de computador em sua forma original, anotado pelo programador em uma linguagem-fonte, antes de ser codificado em instruções de linguagem de máquina

E linguagem-fonte?

n substantivo feminino
Rubrica: informática.
linguagem em que um programa de computador está originalmente escrito, antes de ser codificado em linguagem de máquina

Em minhas palavras, o código-fonte é uma linguagem humanamente inteligível que, quando utilizada corretamente por um programador, pode ser transformada em uma linguagem que os computadores entendam a fim de executar alguma tarefa dentro de um programa de informática.

Voltando ao tema deste post, muitas vezes eu tive que reproduzir aqui neste weblog algum código-fonte de exemplo. Para destaca-lo do restante do texto, modifiquei a cor de todo bloco que representasse essa codificação.

Assim, eu usava:

class Pessoa extends Humano {

private $nome;

private $sexo;

public setNome($nome){

$this->nome = $nome;

}

public setSexo($sexo){

$this->sexo = $sexo;

}

}

porém, ele ficaria muito mais legal, se eu fizesse isso aqui:

[sourcecode language=”php”]

class Pessoa extends Humano {

private $nome;

private $sexo;

public setNome($nome){

$this->nome = $nome;

}

public setSexo($sexo){

$this->sexo = $sexo;

}

}

[/sourcecode]

 

Gostei! Como faz?

O wordpress tem um recurso legal chamado SyntaxHighlighter, que faz com que seu código seja mostrado de uma maneira mais acessível aos programadores.

Eu desconhecia esse truque até que entrei no blog do Giolvani e decidi que era hora de deixar a preguiça de lado e começar a fazer alguma coisa mais consistente pra ajudar o povo que me visita.

Então, encontrei esse tutorialzinho dentro do Codex e gostaria de compartilhar com vocês. O link é:

http://en.support.wordpress.com/code/posting-source-code/

Para transformar, é fácil:

digite o código-fonte dentro da seguinte estrutura:

 

[ sourcecode language=sua linguagem]
seu código fonte
[ /sourcecode ]


EM TEMPO -> coloquei espaços em branco após os colchetes intencionalmente para que ele pudesse aparecer na íntegra dentro deste post. Na prática você deve remover os espaços em branco de dentro das tags, ou seja, após o “[” e antes do “]”.

Dicas úteis:

No lugar de sua linguagem, você deve especificar sobre qual linguagem de programação o highlight se refere, pois existem diversos code-standards para diferentes tipos de linguagem.

Os parâmetros suportados são:

  • actionscript3
  • bash
  • csharp
  • cpp
  • css
  • delphi
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • perl
  • php
  • text
  • powershell
  • python
  • ruby
  • scala
  • sql
  • vb
  • xml

Caso nenhum parâmetro seja especificado, o pseudo bbcode do wordpress vai assumir que você quer apenas fazer um texto simples sem highlight, ou seja, o valor default desse parâmetro é igual a “text”.

Os outros parâmetros opcionais são:

  • autolinks (true/false) — Transforma todas as URLs do seu código-fonte em clicáveis. O valor default é true.
  • collapse (true/false) — Se true, o bloco de código será comprimido (fechado, resumido, collapsed) quando a página carregar, exigindo que o visitante clique para expandir e melhor visualizar. É ótimo para códigos gigantescos. O valor default é false.
  • firstline (número) — Use isso para personalizar o valor numérico da linha inicial da sua numeração. O valor default é 1.
  • gutter (true/false) — Se false, os números das linhas que aparecem no lado esquerdo serão escondidos. O valor default é true.
  • highlight (números das linhas separados por vírgulas) — Você pode listar os números das linhas que você quer destacar, por exemplo: “5, 55, 1578”.
  • htmlscript (true/false) — Se true, qualquer HTML/XML do seu código, ficarão em destaque. É bem útil quando você está misturando linguagens dentro de seu script, como é exemplo de uso ter um código PHP inserido dentro de um contexto HTML. O valor default é false e funcionará somente com algumas linguagens específicas.
  • light (true/false) — Se true, a numeração das linhas e a barra de ferramentas ficarão ocultas. É útil quando você quer postar algo pequeno, como somente 1 ou 2 linhas de código. Isso deixa a visibilidade da sua página bem mais limpa e agradável. O valor default é false.
  • ruler (true/false) — Se true, uma régua de posicionamento de caracteres será mostrada no topo da sua codificação. O valor default é false.
  • toolbar (true/false) — Se false, a barra de ferramentas que mostra botões utilitário quanto você posiciona o mouse em cima do código não será mostrada. O valor default é true.
  • wraplines (true/false) — Se true, a quebra automática de linhas será desabilitada, o que causará o aparecimento de uma barra de rolagem para códigos com linhas muito longas. O valor default é false.

Com isso, o visual dos nossos blogs do wordpress ficarão muito melhor. A partir desse post, estarei adotando essa boa prática.

 

um abraço ao visitante.

 

20 Comments

  1. Rodrigo Ribeiro

    Boa dica Diogo!

    Irei usá-la com certeza, pois é valiosíssima!

    Abraço!

  2. diogobesson

    To pensando se eu faço a conversão dos posts antigos para esse formato, ou não… BAITA trabalheira… rs rs rs

  3. Pingback: Postando Códigos no Wordpress

  4. Pingback: Syntax Highlight II « Diogo Besson :: web tecno log

  5. Alberto Lourenço

    Boa, muito boa!! Ajudou bastante! 😀
    Valeu, cara!

  6. phpsimples

    Otima dica.. adorei!

  7. gabrielsaraiva

    Há! Ótima dica! Merecedora de um link. =P

  8. diogobesson

    Obrigado pelos elogios, pessoal!

    Voltem sempre.

    O blog tá meio às moscas, mas eu to sempre por aqui pra tirar as dúvidas.

    Vocês são a causa dele continuar. =) um abraço a todos!

  9. Pingback: Operador ternário “?” em C « Gabriel Saraiva

  10. Glayson Junio

    Curti muito a dica amigo vou usa-la no meu blog. Obrigada.

  11. diogobesson

    de nada. eu é que agradeço sua visita.
    🙂
    abraço!

  12. Danilo Napoleão

    comigo não deu certo, tentei no visual e no html e nada!
    vc sabe o que pode ser?

  13. diogobesson

    Dá uma olhada aqui -> http://bit.ly/rq4vGt pra ver se tem alguma coisa diferente.

  14. Atsuki

    ótima dica

  15. diogobesson

    opa! valeu!!!

  16. Pingback: Top 5 « Diogo Besson :: web tecno log

  17. Aurélio Vieira

    Cara, você acaba de ganhar um ctrl +D no seu site!

  18. Diogo Besson

    hahaha
    Valeu, Aurélio!!!
    abraço, cara

  19. jlromano

    Muito bom!! A um bom tempo estava procurando isso! TKS!

  20. Diogo Besson (Post author)

    🙂

Leave a Comment

O seu endereço de e-mail não será publicado.