Como inserir código-fonte em uma postagem de um blog
.
No post anterior, precisei colocar vários códigos-fonte de exemplos, o que foi uma tarefa árdua. Por algum motivo que os experts em html devem saber (mas eu não...), o Blogger cismava de estragar minha formatação. Identação então, nem pensar... o bicho teimava em colocar tudo alinhado a esquerda! Achei que tinha resolvido isso, usando a dupla <> e < / pre >, e colocando um pontinho na primeira posição, pra ele respeitar meus espaços da identação...
Tava indo tudo muito bem, até que tentei colocar um exemplo de um laço for... rapaiz, nem com reza braba!! O bicho simplesmente sumia com um pedaço do código! Alguma combinação de caracteres no for deve significar alguma coisa doida pra ele...
Enfim, acho que encontrei a solução para o dilema: sites que formatam código fonte, gerando código html prontinho pra você colocar no post. São eles:
Source code formatter
http://codeformatter.blogspot.com/2009/06/about-code-formatter.html
Format my source code
http://formatmysourcecode.blogspot.com
Em ambos, o funcionamento é o mesmo: você digita seu código-fonte numa caixa, aperta um botão, e ele gera o código html que formata seu código. Os sites geram também um preview, pra você conferir o resultado.
A partir daí, é só copiar o código em html gerado, e levar para seu post. No caso do blogger, quando você estiver na tela de digitação do post, clique na aba "editar html", e cole o código gerado na posição correta.
Abraços!
ps. pode-se tambem mudar o template:
http://vivianningyang.blogspot.com.br/2009/05/how-to-post-source-code-in-blogspotcom.html
when I tried to publish a post in which I can show code snippets, I encountered some difficulties:
(1)Pieces between arrow brackets can not be displayed because in such a case Blogger will try to automatically corrected the HTML code by closing all tags such as an C++ library import<iostream>.
(2)There is neither line indent nor highlight. The code is ugly and hard to read.
So, how to display source code in a good manner? I did some research online. Here are the steps I followed to give the source code a "makeup":
Step 1: Edit the html template
(Layout->Edit HTML)
Edit Use google-code-prettify,a Javascript module and CSS file, to allow syntax highlighting of source code snippets in an html page.
There are many other modules which can do the same job, such as SyntaxHighlighter (You can save them in your google page)
(1) Backup the current template.
(2) Add code to "head" tag.
In the "head" tag, link to the Javascript and CSS files in google prettify code
(3)Customize the "pre" tag
(4)Add onload="prettyPrint()" to your document's body tag
(4)Save the new template.
Step 2: Format the code
(1) Download WebCodeFormatter which is a small Java app which replaces all the critical characters in your code with the appropriate unicode notations which is safer.
(2) Convert the source code and then copy it to your blog post.
(3) Write your code within
References:
1. "How to publish source code in Blogger.com"
2."Posting source code on Blogger"
No post anterior, precisei colocar vários códigos-fonte de exemplos, o que foi uma tarefa árdua. Por algum motivo que os experts em html devem saber (mas eu não...), o Blogger cismava de estragar minha formatação. Identação então, nem pensar... o bicho teimava em colocar tudo alinhado a esquerda! Achei que tinha resolvido isso, usando a dupla <> e < / pre >, e colocando um pontinho na primeira posição, pra ele respeitar meus espaços da identação...
Tava indo tudo muito bem, até que tentei colocar um exemplo de um laço for... rapaiz, nem com reza braba!! O bicho simplesmente sumia com um pedaço do código! Alguma combinação de caracteres no for deve significar alguma coisa doida pra ele...
Enfim, acho que encontrei a solução para o dilema: sites que formatam código fonte, gerando código html prontinho pra você colocar no post. São eles:
Source code formatter
http://codeformatter.blogspot.com/2009/06/about-code-formatter.html
Format my source code
http://formatmysourcecode.blogspot.com
Em ambos, o funcionamento é o mesmo: você digita seu código-fonte numa caixa, aperta um botão, e ele gera o código html que formata seu código. Os sites geram também um preview, pra você conferir o resultado.
A partir daí, é só copiar o código em html gerado, e levar para seu post. No caso do blogger, quando você estiver na tela de digitação do post, clique na aba "editar html", e cole o código gerado na posição correta.
Abraços!
ps. pode-se tambem mudar o template:
http://vivianningyang.blogspot.com.br/2009/05/how-to-post-source-code-in-blogspotcom.html
How to post source code in blogspot.com
(1)Pieces between arrow brackets can not be displayed because in such a case Blogger will try to automatically corrected the HTML code by closing all tags such as an C++ library import<iostream>.
(2)There is neither line indent nor highlight. The code is ugly and hard to read.
So, how to display source code in a good manner? I did some research online. Here are the steps I followed to give the source code a "makeup":
Step 1: Edit the html template
(Layout->Edit HTML)
Edit Use google-code-prettify,a Javascript module and CSS file, to allow syntax highlighting of source code snippets in an html page.
There are many other modules which can do the same job, such as SyntaxHighlighter (You can save them in your google page)
(1) Backup the current template.
(2) Add code to "head" tag.
In the "head" tag, link to the Javascript and CSS files in google prettify code
<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"/>
(3)Customize the "pre" tag
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+ */ }
(4)Add onload="prettyPrint()" to your document's body tag
- <body> + <body onload='prettyPrint()'>
(4)Save the new template.
Step 2: Format the code
(1) Download WebCodeFormatter which is a small Java app which replaces all the critical characters in your code with the appropriate unicode notations which is safer.
(2) Convert the source code and then copy it to your blog post.
(3) Write your code within
<pre class="prettyprint"> source code </pre>
References:
1. "How to publish source code in Blogger.com"
2."Posting source code on Blogger"
Nenhum comentário:
Postar um comentário