Destacar código fonte no Wordpress

Publicado por Paulo Alberto Neukamp em 26/01/2009

[ Hits: 10.691 ]

Blog: http://neukamp.fdtk.com.br

 


Destacar código fonte no Wordpress



Neste tutorial vou falar um pouco sobre como destacar os códigos fonte postados no Wordpress. Para realizar esta tarefa é necessário instalar o plugin wp-syntax. Com este plugin e mais alguns ajuste finos que mostrarei a seguir, é possível postar scripts em sua página com uma aparência melhor.

Instalar e Configurar

A instalação deste plugin segue o padrão dos demais, faça o download do plugin no link indicado acima , copie para o seu servidor em wp-content/plugins/, descompacte o arquivo e habilite-o no painel de plugins.

A partir deste momento sempre que for postar algum script e quiser que o conteúdo fique destacado, basta inserir pre lang="bash", onde "bash" é o esquema de destaque que será aplicado ao conteúdo.

Dentro da pasta wp-content/plugins/wp-syntax/geshi/geshi existem 109 padrões de destaque de código; você pode escolher qualquer um deles e substituir o "bash" na expressão e verificar se gosta, ou ainda, customizar um dos padrões existentes. Caso você ache interessante que apareça junto ao código o número das linhas, adicione line="1" na expressão pre lang="bash", ficando assim:

pre lang="bash" line="1"

Foram realizadas por mim algumas customizações como pode ser visto na imagem, caso tenha gostado, o arquivo bash.php pode ser baixado em http://fdtk.com.br/files/bash.php e salvo na pasta wp-content/plugins/wp-syntax/geshi/geshi do seu wordpress.
Outra dica interessante é copiar o arquivo wp-syntax.css para a raiz do seu theme, no meu caso wp-content/themes/zanblue, e fazer os ajustes que você julgue necessários. Você também pode baixar a versão do wp-syntax.css customizada em http://fdtk.com.br/files/wp-syntax.css.

Alguns dos ajustes que provavelmente você deverá fazer no arquivo wp-syntax.css são:
  • Cor dos caracteres que não foram destacados;
  • Cor de fundo da caixa de diálogo;
  • Largura da caixa de diálogo;
  • Altura da caixa de diálogo.

wp_syntax {
  color: #fff;  // Cor dos caracteres que não foram destacados pelo padrão adotado
  background-color: #111;  // Cor de fundo da caixa de diálogo
  border: 1px solid silver;  // Bordas da caixa de dialogo
  margin: 30px 0 1.5em 0;
  overflow: auto;
}

/* IE FIX */
.wp_syntax {
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  width: 100%;  // Largura da caixa de diálogo
  height: 400px;  // Altura da caixa de diálogo
}

.wp_syntax table {
  border-collapse: collapse;
}

.wp_syntax div, .wp_syntax td {
  vertical-align: top;
  padding: 2px 4px;
}

.wp_syntax .line_numbers {
  text-align: right;
  background-color: #def;
  color: gray;
  overflow: visible;
}

/* potential overrides for other styles */
.wp_syntax pre {
  margin: 0;
  width: auto;
  float: none;
  clear: none;
  overflow: visible;
  font-size: 12px;
  line-height: 1.333;
}

Espero ter ajudado!

Outras dicas deste autor

Postando scripts no Wordpress

Leitura recomendada

Vídeo aula: Como fazer uma calculadora no Lazarus

Comprei um computador com Linux, o que faço?

CEMF linux - Sistema baseado no Slackware

Desenvolvimento de Lista Encadeada Dinâmica Genérica

APT - Corrigir erro de chave pública (W: Erro GPG)

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts