Como inserir código fonte no seu blog com o tema do Eclipse

Olá, eu este artigo será bem rapidinho, achei bem interessante, por isso resolvi escrever pra você.

Eu sou daqueles que quando consigo algo novo para o meu blog fico doido para compartilhar a dica e mostrar pra todo mundo com é que faz. E neste caso não é diferente.

Comecei a postar conteúdo de programação, e provavelmente farei vários posts com códigos fonte. Então procurei várias formas de mostrar os códigos de maneira mais organizada e bonita.

Encontrei este método que acrescenta o código com linhas numeradas bem parecido com o Eclipse (para quem não conhece é um ambiente para programar em Java) e gostei muito, veja aqui o resultado.

Como Fazer

Primeiro acesse a HTML do seu blog, para quem ainda não sabe o caminho basta clicar em Modelo e depois em Editar HTML.

Agora procure pela Tag </HTML>  e acima dela cole o código a seguir:

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Agora está fácil, todas as vezes que quiser que um trecho fique com o visual de código fonte, basta clicar no botão HTML quando estiver escrevendo e depois acrescentar os comandos abaixo antes e depois do trecho, veja no exemplo:

<script type="syntaxhighlighter" class="brush: html"><![CDATA[

Aqui você digita seu código

]]></script>

Veja como ficará o exemplo acima:

Legal né?! O mais legal é que você poderá substituir o HTML na linha <script type="syntaxhighlighter" class="brush: html"><![CDATA[  por qualquer outra linguagem da lista:

• ActionScript3
• Bash/shell
• ColdFusion
• C#
• C++
• CSS
• Delphi
• Diff
• Erlang
• Groovy
• JavaScript
• Java
• JavaFX
• Perl
• PHP
• Plain Text
• PowerShell
• Python
• Ruby
• Scala
• SQL
• Visual Basic
• XML

E aí gostou? Deixe seu comentário e veja mais tutoriais para melhorar ainda mais seu blog, e assim bombar nas visualizações...

Um grande abraço e até a próxima...