Postando scripts no Wordpress parte 2
Destacar códigos fonte em Post's
No post anterior Postando scripts no Wordpress, falei sobre o plugin sem-unfancy-quote que resolve a substituição de alguns caracteres quando são postados scripts no wordpress.
Neste post vou falar um pouco sobre como destacar os códigos postados. Para realizar esta tarefa é necessário instalar o plugin wp-syntax. Com este plugin + alguns ajuste finos que mostrarei a seguir, é possÃvel postar scripts com uma melhor aparência no seu blog, por exemplo:
#!/bin/bash # Paulo Neukamp # Scrypt de customizacao do ubuntu-8.04.1-desktop-i386.iso Desktop echo echo echo " Iniciando a Customizacao" echo echo " 1 - Atualizando lista de programas e instalando as dependencias" sudo apt-get update sudo apt-get install -y squashfs-tools genisoimage xnest xserver-xephyr xfonts-cyrillic sudo modprobe squashfs echo echo " Removendo arquivos antigos...." sudo rm -R ~/live echo echo " OK" echo echo " 2 - Carregando o squashfs" sudo modprobe squashfs echo " OK" echo echo " 3 - Copiando a iso para o diretorio de manipulacao" mkdir ~/live cp ~/isos/ubuntu-8.04.1-desktop-i386.iso ~/live cd ~/live/ echo " OK" echo echo " 4 - Montando a imagem ISO" mkdir mnt sudo mount -o loop ubuntu-8.04.1-desktop-i386.iso mnt echo " OK" echo echo " 5 - Extraindo conteudo da ISO"
A instalação deste plugin segue o padrão dos demais, faça o download do plugin clicando aqui, copie para o seu servidor em wp-content/plugins/, descompacte o arquivo e abilite-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 padroõ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">.
No exemplo de destaque mostrado acima, foram realizadas por mim algumas customizações, caso tenha gostado, o arquivo bash.php pode ser baixado 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 customizada por mim aqui.
Alguns dos ajustas que provavelmente você deverá fazer no arquivo wp-syntax.css são:
1 РCor dos caracteres que ṇo foram destacados;
2 – Cor de fundo da caixa de diálogo;
3 – Largura da caixa de diálogo;
4 – 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!!!
