Adicionando SyntaxHighlighter ao 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>

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

<script="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
<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

Posted in: Informática