Adicionar Syntax Highlight ao layout do Blogger/Blogspot

Postado por Carlitos | Tags , | Postado em 18:10

0

É muito ruim ler um código sem syntax highlight, não é? Pois é, passei alguns duas postando aqui no cakenaveia e resolvi procurar esse recurso para adicionar ao bloguezito... achei um muito legal que atende a diversas linguagens: PHP, HTML, CSS, JScript, Java, Perl e etc. O projeto é velhinho já (desde 2007) e muito bacana, veja aqui no site do script deles (mas só fiquei sabendo deles através do artigo deste camarada aqui {créditos}.

Então mãos a obra:
1º) baixe os scripts aqui, em seguida hospede eles em algum lugar.
2º) Acesse o painel de controle do seu blog (blogspot/blogger - mas vale para qualquer outro feito em Wordpress), vá até a aba Layout em seguida HTML.
3º) Dentro do HEAD do html do blog adicione os scripts do syntaxhighlight das linguagens que você vai precisar, veja:


<script language='javascript' src='http://...seusite.../shCore.js'/>

<script language='javascript' src='http://...seusite.../shBrushJava.js'/>

<script language='javascript' src='http://...seusite.../shBrushPhp.js'/>

<script language='javascript' src='http://...seusite.../shBrushJScript.js'/>

Adicione também o CSS do syntaxhighlight
<link href='http://...seusite.../SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

4º)Antes da </body> adicione o código
<script language='javascript'>
  dp.SyntaxHighlighter.ClipboardSwf = 'http://...seusite.../clipboard.swf';
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll('code');
</script>

5º) Pronto! Agora para usar basta escrevesr os códigos dentro de um tag <pre name='code' class='php ou css ou html.. (a linguagem que vc está escrevendo)> seus codigos <pre> e eles aparecerão bonitinhos para os leitores.

Abração pra todos!

Comentários postados (0)

Postar um comentário