Caixa personalizada por CSS para exibir códigos em postagens do Blogger

Primeiramente procure pela opção EDITAR HTML na página de personalização do layout de seu Blogger.

Já com a tela para editar o html aberta vá em EDITAR MODELO e busque a tag <b:skin> para adicionar o estilo CSS dentro dessa tag. Ou se preferir crie <style type='text/css'> dentro de <head> que funciona também.

Abaixo estão alguns exemplos de personalização, escolha um e adicione o estilo CSS como foi indicado acima.

Caixa básica

Esta tem apenas uma opção para cor de fundo e texto. Nos campos indicados pode-se alterar para a cor que preferir.

code{
overflow:auto;
background: #808080; /* Cor do fundo */
border:1px solid #000;
color:#ffffff; /* Cor do texto */
font-size:90%;
height:auto;
display:block;
white-space:pre;
text-align:left;
word-wrap:break-word;
padding:10px;
}

Para usar:
<code> [... CÓDIGO AQUI ...] </code>

Caixa dinâmica

Esta é interessante, colore o texto do código de acordo com sua semântica.

pre {

        margin: 5px 20px;

        border: 1px dashed #666;

        padding: 5px;

        background: #f8f8f8;

        white-space: pre-wrap;       /* css-3 */

        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

        white-space: -pre-wrap;      /* Opera 4-6 */

        white-space: -o-pre-wrap;    /* Opera 7 */

        word-wrap: break-word;       /* Internet Explorer 5.5+ */

    }

Além do estilo deve-se adicionar estes complementos para que a dinâmica de cores funcione:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Para usar:

<pre class="prettyprint"> [... CÓDIGO AQUI ...] </pre>

Caixa com fundo personalizado e limite de altura

Quando o conteúdo ultrapassa os 200px de height, limita o tamanho com barra de rolagem. Parâmetro pode ser alterado.

.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px; /* Altura limite da caixa */
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}

.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}

Para usar:

<div class="code"> [... CÓDIGO AQUI ...] </div>

DeploYou

novembro 02, 2013