sábado, 28 de agosto de 2010

Colorindo código fonte no Blogger com JQuery-SyntaxHighlighter

1) Painel de configurações > Design > Editar HTML (Cuidado com esse código fonte!):


Acrescente essas linhas entre a tag head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://github.com/balupton/jquery-syntaxhighlighter/raw/master/scripts/jquery.syntaxhighlighter.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {$.SyntaxHighlighter.init();});</script>


2) Depois, nos seus posts, apenas coloque o seu exemplo de código entre tags "code", exemplos:

<code class="language-html">...</code>
<code class="language-java">...</code>
Entre outras linguagens...

Autodetecção de linguagem:
<code class="highlight">...</code>

3) Como o fundo desse blog é preto, preferi deixar o fundo do código como branco. Para isso:

Painel de configurações > Design > Designer de Modelo > Avançado > Adicionar CSS:
code { background-color: white; }

Fontes:
http://www.balupton.com/#/projects/jquery-syntaxhighlighter

Um comentário: