Como disponibilizar códigos de programação em WordPress sem plugins

Author: Ricardo Soares - Postado em: 06/01/2015
Relacionado as categorias: Tecnologia, Diversos |  





O que fazemos é uma técnica antiga, teoricamente funciona para qualquer versão do WordPress, basta alterar o arquivo style.css adicionando neste novas formatações para a TAG “PRE” e criar a TAG “code”. Vale lembrar que é interessante dar uma ulhada no arquivo para ver se existe alguma formatação pre-definida destas entidades e o impacto que esta implementação teria no blog como um todo, mas segundo o que sei as templates padrões até hoje não fazem uso destas TAGs e por conta disto dificilmente haveria problemas.

Após a alteração o código  ficará parecido com o abaixo


Exemplo de código;
Se Tudo "ok"; então;
      Mostrar "Ficou Ok";
Fim Se;

Claro que não tem a coloração de código mas funciona para qualquer linguagem posto que não formata o código, a técnica simplesmente formata o texto entre as TAGs “PRE/CODE” conforme indicado o que é melhor do que simplesmente colocar o código como texto simples e ainda não demanda de instalação de plugins.

Abaixo o código a ser alterado no style.css


pre, code{
 font-family: Consolas, 'Liberation Mono', Courier, monospace;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 13px;
 direction: ltr;
 text-align: start;
 color: #323232;
}
pre {
 border: 1px dashed #000;
 margin: 10px;
 padding:10px;
 background: #FFFFB3;
 box-sizing: border-box;
 margin: 5px 5px 5px 5px;
 padding: 10px 10px 10px 10px;
 word-wrap: normal;
 letter-spacing: normal;
 orphans: auto;
 text-indent: 0px;
 text-transform: none;
 widows: auto;
 word-spacing: 0px;
 -webkit-text-stroke-width: 0px;
 background-color: #E8E8E8;
}
code {
 white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;
 word-wrap: break-word;
}












Comments

Leave a Reply






Últimos posts