Como usar o SyntaxHighLighter para publicar código-fonte no seu Blog

SyntaxHighlighter é uma ferramenta desenvolvida em JavaScript que cria caixas de texto para códigos-fonte de programas. Com o SyntaxHighlighter você pode visualizar diversas linguagens, dentre elas Shell Script, C, C++, C#, CSS, Delphi, JavaScript, Java, Perl, PHP, Python, Ruby, SQL e XML.
Através do uso desta ferramenta é possível manter o código no formato original, sem perder a identação, o código fica com linhas numeradas e o código é colorido de acordo com a linguagem. É muito útil para visualizar, exemplificar e explicar códigos-fontes em blogs ou sites de programação.
Ainda há um botão para os leitores que desejarem copiar o código.

Neste tutorial vou explicar como inserir e utilizar o SyntaxHighlighter no blog para publicar seus códigos-fonte. Primeiro faça o login, clique em Layout (ou Design) e clique em Editar HTML. Faça o backup clicando em Baixar Modelo Completo.

1º Cole o código CSS no HTML do Blogger antes de </b:skin>

/* CSS do SyntaxHighlighter */
.dp-highlighter{font-family:"Consolas", "Monaco", "Courier New", Courier, monospace;font-size:12px;background-color:#E7E5DC;width:99%;overflow:auto;padding-top:1px;margin:18px 0 !important;}
.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span{border:none;margin:0;padding:0;}
.dp-highlighter a,.dp-highlighter a:hover{background:none;border:none;margin:0;padding:0;}
.dp-highlighter .bar{padding-left:45px;}
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left:0;}
.dp-highlighter ol{list-style:decimal;background-color:#fff;color:#5C5C5C;margin:0 0 1px 45px !important;padding:0;}
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style:none !important;margin-left:0 !important;}
.dp-highlighter ol li,.dp-highlighter .columns div{list-style:decimal-leading-zero;list-style-position:outside !important;border-left:3px solid #6CE26C;background-color:#F8F8F8;color:#5C5C5C;line-height:14px;margin:0 !important;padding:0 3px 0 10px !important;}
.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{border:0;}
.dp-highlighter .columns{background-color:#F8F8F8;color:gray;overflow:hidden;width:100%;}
.dp-highlighter .columns div{padding-bottom:5px;}
.dp-highlighter ol li.alt{background-color:#FFF;color:inherit;}
.dp-highlighter ol li span{color:#000;background-color:inherit;}
.dp-highlighter.collapsed ol{margin:0;}
.dp-highlighter.collapsed ol li{display:none;}
.dp-highlighter.printing{border:none;}
.dp-highlighter.printing .tools{display:none !important;}
.dp-highlighter.printing li{display:list-item !important;}
.dp-highlighter .tools{font:9px Verdana, Geneva, Arial, Helvetica, sans-serif;color:silver;background-color:#f8f8f8;border-left:3px solid #6CE26C;padding:3px 8px 10px 10px;}
.dp-highlighter.nogutter .tools{border-left:0;}
.dp-highlighter.collapsed .tools{border-bottom:0;}
.dp-highlighter .tools a{font-size:9px;color:#a0a0a0;background-color:inherit;text-decoration:none;margin-right:10px;}
.dp-highlighter .tools a:hover{color:red;background-color:inherit;text-decoration:underline;}
.dp-about{background-color:#fff;color:#333;margin:0;padding:0;}
.dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif !important;}
.dp-about td{vertical-align:top;padding:10px;}
.dp-about .copy{border-bottom:1px solid #ACA899;height:95%;}
.dp-about .title{color:red;background-color:inherit;font-weight:700;}
.dp-about .para{margin:0 0 4px;}
.dp-about .footer{background-color:#ECEADB;color:#333;border-top:1px solid #fff;text-align:right;}
.dp-about .close{font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif !important;background-color:#ECEADB;color:#333;width:60px;height:22px;}
.dp-highlighter .comment,.dp-highlighter .comments{color:#008200;background-color:inherit;}
.dp-highlighter .string{color:blue;background-color:inherit;}
.dp-highlighter .keyword{color:#069;font-weight:700;background-color:inherit;}
.dp-highlighter .preprocessor{color:gray;background-color:inherit;}

2º Cole o código a seguir antes da tag </head>. São as chamadas das linguagens. Cole somente as que você utiliza.

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>

3º Cole o código antes da tag </body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Clique em Visualizar, e se não der nenhum problema clique em Salvar modelo.

Para adicionar o código nas postagens, basta clicar em Editar Html quando estiver fazendo seu post e adicione a tag:

<pre class="linguagem" name="code">Seu código aqui....
</pre>

No atributo class onde está escrito "linguagem", deve-se escrever a linguagem que irá utilizar (por exemplo C, C++, Java, Delphi, XML, HTML).
A listagem completa você encontra aqui.

OBS.: Para quem for usar o símbolo "<" em seu código, substitua-o por "&lt;"

A seguir, um exemplo do uso de SyntaxHighlighter:

#include<stdio.h>
int main(){
printf("Hello World finalmente!!!");
return 0;
}