SyntaxHighlighter no Blogger

Tá, tá, eu sei, já existem muitos tutoriais para o SyntaxHighlighter por ai na internet. Mas, como vocês podem ver no ultimo post, só agora eu o coloquei no blog. Estou colocando aqui um post pra me lembrar dos passos que usei pra que este script funcione corretamente, pois mesmo seguindo os tutoriais encontrados por ai, não foi lá muito facil.

Vamos lá.  Vá no Painel do Blogger, selecione Layout e depois Editar HTML. Aqui começa a diferença. Os outros tutoriais pedem pra vc hospedar os arquivos .js em algum lugar, e apontar pra eles do seu blog. Mas por que não  usar o próprio repositório SVN do SyntaxHighlighter? Copie o código a seguir e cole antes da tag </body>

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>

<script class='javascript'>  
//<![CDATA[  
    function FindTagsByName(container, name, Tag)  
    {  
        var elements = document.getElementsByTagName(Tag);  
        for (var i = 0; i < elements.length; i++)  
        {  
            if (elements[i].getAttribute("name") == name)  
            {  
                container.push(elements[i]);  
            }  
        }  
    }  
    var elements = [];  
    FindTagsByName(elements, "code", "pre");  
    FindTagsByName(elements, "code", "textarea");  
   
 for(var i=0; i < elements.length; i++) {  
  if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {  
   var childNode = elements[i].childNodes[0];  
   var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));  
   elements[i].replaceChild(newNode, childNode);  
     
  }  
else if(elements[i].nodeName.toUpperCase() == "PRE") {  
   brs = elements[i].getElementsByTagName("br");  
   for(var j = 0, brLength = brs.length; j < brLength; j++) {  
    var newNode = document.createTextNode("\n");  
    elements[i].replaceChild(newNode, brs[0]);  
   }  
  }  
 }  
  //clipboard does not work well, no line breaks  
  // dp.SyntaxHighlighter.ClipboardSwf =   
  //"http://marcin.doman.googlepages.com/clipboard.swf";  
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll("code");  
//]]>
</script>

Feito isso, vc ja pode ver o código fonte formatado mais ou menos como vc quer no seu post. Caso nao esteja funcionando corretamente no firefox, mova o trecho

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>

para antes da tag </head>, depois abra o arquivo

http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

Copie o conteúdo e cole entre as tags <style class="text/css"></style> de forma que fique antes os js's acima citados. Feito isso, remova a tag abaixo do código

<link href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link>

Caso o seu blog exiba imagens de fundo para as tags <li>, você, além de inserir manualmente o css, como no passo anterior, também precisa adicionar o trecho

div.dp-highlighter li {
  background-image: none;
}

Se você abrir o mesmo post no firefox e no IE, por exemplo, perceberá que existe um link para "copy to clipboard". No firefox, mesmo que vc o insira manualmente (usando o ClipboardSwf, como mostrado abaixo),

dp.SyntaxHighlighter.ClipboardSwf = "http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf"
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll("code");

ele não funciona. Bem, é isso... Espero que quem tenha encontrado dificuldades como eu consiga resolver (ainda que parcialmente) os problemas com esse tutorial meia boca ;)