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:
- Colar o código no post, na janela de edit
HTML - Selecioná-lo
- Transformá-lo em HTML clicando no botão
HTML ENCODE SELECTION - 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:
Discussion