Adicionar SyntaxHighlighter no Blogger e WordPress.

SyntaxHighlighter é uma ferramenta desenvolvida em JavaScript que cria caixas de texto para códigos-fonte de programas, numeração de linha e coloracção (highlight) de código. É  muito util em blogs de programação.

Com o SyntaxHighlighter pode-se visualizar diversas linguagens, dentre elas Bash (Shell Script), C#, C, C++, CSS, Delphi, JavaScript, Java, Perl, PHP, Python, Ruby, SQL e XML, cada um com seu sistema de coloração específico.

Adicionando ao Blogger

Para utilizar o SyntaxHighlighter no Blogger é preciso que você faça o login e clique em Layout >Editar HTML.

Adicionar o SyntaxHighlighter no código fonte do blogger

1º Cole o código CSS no HTML do Blogger

após de <b:skin> e 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 das chamadas  das linguagens  antes da tag </head>

 <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"><!--mce:0--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"><!--mce:1--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"><!--mce:2--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"><!--mce:3--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"><!--mce:4--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"><!--mce:5--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"><!--mce:6--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"><!--mce:7--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"><!--mce:8--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"><!--mce:9--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"><!--mce:10--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"><!--mce:11--></script>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"><!--mce:12--></script>

Cada script representa uma linguagem de programação se por a caso não utilizar alguma pode retirar a linha referente a essa linguagem por exemplo Delphi, isso ajudará no carregamento da página.

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

<script><!--mce:13--></script>

Clique em  “Visualizar” se não der nenhum problema  clique em “Salvar modelo”.

Adicionar códigos nas postagens.

Para colocar os códigos nas postagens basta clicar em “Editar Html quando estiver fazendo seu post e adicione a tag:

< pre class="NOME DA LINGUAGEM QUE VAI UTILIZAR" name="code">Seu código aqui....

< /pre>

No atributo class onde está escrito “NOME DA LINGUAGEM QUE VAI UTILIZAR”, deve-se substitur pela linguamgem que vai utilizar por exemplo cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, xml, html, xhtml, xslt; veja a lista completa aqui

Adicionando ao WordPress

Para utilizar o SyntaxHighlighter no WordPress não é necessário modificar nenhum código basta somente instalar um plug-in:

Download

Fontes: heisencoder, eu programo.net