Como postar código fonte no blog

Não sem dificuldade, pesquisei e instalei o necessário para poder colocar no blog código fonte. Para que isso seja possível, com os simples 4 passos:

  1. Colar o código no post, na janela de edit HTML
  2. Selecioná-lo
  3. Transformá-lo em HTML clicando no botão HTML ENCODE SELECTION
  4. Colocar o código entre as tags <pre class=“prettyprint”> e </pre>

É preciso antes configurar algumas coisas:

O item 3- O botão do item 3 não vem instalado por default. Para conseguí-lo é preciso:

3.1- instalar o add-on do firefox chamado greasemonkey, disponível na página GreaseMonkey Add-on
3.2- instalar o script que o greasemonkey usa para incluir o botão HTML ENCODE SELECTION. Para isso, após instalado, clique em: Script HTML ENCODE SELECTION
O greasemonkey deve aparecer na tela confirmando se quer instalar o script.

O item 4- As tags <pre class=“prettyprint”> e </pre> não estão prontas para serem usadas. Para instalá-las é preciso:

4.1- Vá para as configurações do seu blog e edite o HTML Template
4.2- Faça um backup do código HTML antes de alterá-lo
4.3- Adicione na tag “head” o código (este é para o google-prettify, mas podem ser usados outros como o SyntaxHighlighter).

<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"/>

4.4- Crie a tag “pre” adicionando o código:

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+ */
}
<code>

4.5- Adicione dentro da tag "body" o código:

<code>
- <body>
+ <body onload='prettyPrint()'>

4.6- Salve o novo template. Agora sim você pode inserir código fonte de modo fácil, como descrito acima. Referências

References:

You could leave a comment if you were logged in.
  • 2011/03/como-postar-codigo-fonte-no-blog
  • Last modified: 2011/03/26 13:06