segunda-feira, 24 de agosto de 2009

SyntaxHighlighter - Instalação no Blogger/Blogspot

Assim com meu amigo Mário Guedes, eu também passei por uma pequena dor de cabeça para fazer o SyntaxHighlighter funcionar no blogspot.

Para fazer o SyntaxHighlighter funcionar aqui, é necessário adicionar as seguintes referências Javascript no layout de seu blog (eu adicionei estas referências antes da tag </body>)


<link href="http://flash-host.com.br/blog/sh/SyntaxHighlighter.css" rel="stylesheet" type="text/css"/>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushVb.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushDelphi.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushSql.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


Para escrever um trecho de código é simples, crie uma tag dentro do tipo "pre" e sete o atributo name para "code", e no atributo class é onde escolhe o tipo da linguagem, ex: <pre name="code" class="csharp">, depois é só colocar o seu código e depois fechar a tag pre com <pre>. e pronto, já está ok para visualização.
Ex:
<pre name="code" class="csharp">
public void Stuff() { }
<pre>.

Um comentário:

  1. Muito bom seus blogs!

    Acesse o meu blog "Escopo da Computação" (http://e-comput.blogspot.com/) - Template simples, mas funcional... kkkk... o meu não é nada profissional!!!

    Continue publicando... kkkk

    ResponderExcluir