Como postar código fonte no wordpress

Este é o meu primeiro post neste blog que tem como objetivo auxiliar os desenvolvedores menos experientes a resolver coisas simples, que por muitas vezes de tão simples, tornam-se complicadas… Se você está aqui, é porque sabe bem do que eu estou falando hehehe.

Bom, vamos lá.

O primeiro assunto deste blog será sobre uma pequena dúvida que tive ao criar o blog (sim, é meu primeiro blog ‘-‘ ): como eu posto o meu código fonte no wordpress?! Pode ser uma informação fácil de achar, até mesmo no próprio suporte do wordpress, de onde pesquisei sobre o assunto. Mas estou disponibilizando isso aqui para vocês, pois não encontrei a versão em português deste artigo do suporte.

Ao ver que a toolbar de edição de conteúdo não continha alguma marcação do tipo “code”, eu pensei em postar imagens dos códigos. Seria uma boa opção, pois forçaria os leitores a digitarem o código na mão caso desejassem usá-lo como exemplo. Mas eu também já precisei muito de exemplos, e sei como é chato as vezes ter de re-escrever o código todo ><”

Toolbar wordpress

Toolbar de edição de conteúdo do wordpress

Então fui atrás disso, e aqui está:

wordpress não permite que você faça upload do seu código fonte, pois isso pode apresentar perigo de várias formas (posteriormente posso escrever sobre isso, mas recomendo uma pesquisa sobre script injection), então a maneira que encontraram foi permitir que você escreva o seu código fonte dentro de um marcador sourcecode. Assim, o conteúdo que está entre o marcador é tratado de uma forma que não apresente perigo, pois o user agent (Interface com o usuário, um browser por exemplo.) não irá interpretá-lo como um código fonte.

Veja como é muito fácil, basta colocar seu código entre os seguintes marcadores:

[sourcecode language=”<a linguagem que você quer>“]

O seu código fonte aqui

[/sourcecode]

Um exemplo de código em java:

1public static void main(String[] args){}

Caso você não defina a linguagem a ser utilizada, o conteúdo entre os marcadores será exibido em forma de texto simples sem formatação.

Agora alguns parâmetros opcionais para utilizar dentro do marcador:

autolinks: Pode assumir os valores true e false. Quando true, torna todos os links que estiverem no seu código fonte, clicáveis. (Como default, essa opção já vem como true.)

collapse: Pode assumir os valores true e false. Quando true, faz com que a caixa que contém o seu código fonte seja carregada “compactada”, exibindo somente parte de todo o código. Quando o visitante clica na caixa, ela se expande, e todo o código fonte é exibido. (Como default, essa opção já vem como false.)

firstline: Recebe um valor numérico. Define qual será o número da primeira linha de código. (O valor padrão é 1)

gutter: Pode assumir os valores true e false. Quando true, o número da linha do código fonte é exibido. (Como default, essa opção já vem como true.)

highlight: Recebe uma lista de números separados por vírgulas, ex. “2,10,50,30”. Destaca linhas de código.

htmlscript: Pode assumir os valores true e false e só funciona com certas linguagensQuando true, todo o código html/xml ficarão destacados. É muito útil quando temos HTML misturado com scriptlets de java, php ou qualquer outra linguagem.

light: Pode assumir os valores true e false. Caso true, a toolbar e o número da linha serão ocultadas. Bom para quando o seu código fonte possui poucas linhas de código, deixando a caixa de código fonte mais limpa.

padlinenumbers: Pode assumir os valores truefalse e integer. Permite controlar o número de dígitos do número da linha de código. Caso true, o controle será automático, ex. 01, 02, 03. Caso false, o controle será desabilitado, ex. 1,2,3. Caso um número seja utilizado, serão utilizados os números de dígitos correspondentes. Ex. número 4, resultará em algo como isso: 0001.

toolbar: Pode assumir os valores true e false. Caso true, exibe opções (copiar, imprimir, etc.) quando o visitante posiciona o ponteiro do mouse em cima da caixa onde está o código fonte. (Como default, essa opção já vem como true.)

wraplines: Pode assumir os valores true e false. Caso false, a quebra de linha automática será desabilitada, fazendo com que apareça a barra de rolagem horizontal nas linhas de conteúdo muito extenso.

Essa marcação possui estilos de código para as seguintes linguagens:

  • ActionScript3
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Bom, agora que você já sabe como adicionar código fonte formatado ao seu post, faça bom proveito!