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:
Fontes: heisencoder, eu programo.net
Vou guardar seu blog nos meus favoritos pq pode me ser útil.
Obrigada.
Realmente eu estava procurando isso faz tempo! Vou seguir aqui e adicionar aos favoritos também! Muito útil mesmo!!
Que dica maneira.
Vou ver com mais detalhes como pode estar implementando essa dica no meu blog.
Até mais.
não entendi direito mas blz.
Muito informativo!Parabêns!
show de bola!
onbrigado.
adorei o post.
Muito obrigado!!!
muito bom meeeeeeeeeeesmo…