Adicionar Syntax Highlight ao layout do Blogger/Blogspot
Postado por Carlitos | Tags blog , javascript | 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