Bom, nessa jornada me deparei com uma coisa que ainda não tinha percebido em relação ao Blogger / Blogspot, o suporte a Syntax Highlighting para códigos.
Como sempre dei uma xeretada na Net e encontrei algumas soluções, todas elas baseadas em CSS + .JS. O detalhe é que não encontrei nada em português, por isso resolvi fazer esse post.
Pra conseguir a façanha é bom dar uma passa da nesses links:
1. Morten Lyhr
2. Juri Strumpflohner
3. google-code-prettify
4 . README do google-code-prettify
4. Scroll area with overflow in CSS
5. Conversor de Markup
Depois de dar uma lida nos links acima você vai notar que a idéia é a seguinte:
1- Tudo é baseado no CSS + JavaScript, então você deve baixar o arquivo do google-code-prettify e hospedá-lo em algum lugar para que o seu blog possa acessá-lo durante o "carregamento" da página.
2 - Depois você deve adicionar as duas linhas abaixo (indicando o endereço onde está seu CSS e seu Javascript) no HTML do seu tema do Blogger (clicando em MODELO > Editar HTML)
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
3 - Deve-se ainda adicionar a tag (onload="prettyPrint()") no body do seu Modelo HTML, algo como: <body onload="prettyPrint()">
4 - Para adicionar os blocos de código verifique o README do google-code-prettify.
5 - Um último detalhe é que o código não coloca scroll bars automáticos então é necessário adicionar um CSS no corpo do HTML do modelo mesmo e utilizá-lo em conjunto com o google-code-prettify e se precisar utilizar o conversor de markup para tags HTML que precisem ser impressas junto ao código.
Acho que é isso.. :)
Se por acaso ficar algo que você não tenha entendido é só deixar um comentário que eu tentarei ajudá-lo.
Pronto! agora é só usar... :D
Abraço!!!
5 comentários:
Bom Dia,
Uso o Blogspot e inseri...
1. Morten Lyhr
script language javascript
dp.SyntaxHighlighter.ClipboardSwf 'http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
script
O único aceito ficou assim desta página no final do meu HTML.
body
script language='javascript'
dp.SyntaxHighlighter.ClipboardSwf = 'http://sanidadeinsanidade.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
script
/html
Mudando somente o nome do Blog para htt://sanidade.insanidade.HighlightAll('code').
O Primeiro link não foi aceito.
2- No Blog.js.development não compreendi...
textarea name="code" class="java" public class Test{...}/textarea, onde colocar e o que colocar no {...} seria a frase que desejo colocar de início?
3 - Fiz o Download do google-code-prettify, mas não sei como utilizá-lo nem como colocar no meu Blog.( google-code-prettify e hospedá-lo em algum lugar para que o seu blog possa acessá-lo durante o "carregamento" da página.) Não consigo!!!
Sendo ele ainda em HTML. Aceitando flash, shockwave e aplicativos de jogos (básico).
4- na Página do Google-code-prettify.googlecode, onde devo incluir a Tag e Add onload=prettyPrint() to your document's body tag. que seria?
Put code snippets in >>pre class="prettyprint">.../pre or code class="prettyprint"...code and it will automatically be pretty printed. O que devo clocar nos "..."?
5 - Em Scroll area with overflow in CSS - Inclui o código e foi aceito
6 - Sua Tag ficou assim:
Abrir nova página do Blog
base target='_blank
Editar HTML
link href 'prettify.css' rel 'stylesheet' type 'text/css'/ script src prettify.js type 'text/javascript'
style type 'text/css
A única coisa que posso pedir é SOCOOOOOOROOOOOOO!!!
Me Desculpe e obrigada se por acaso ajudar!!!
P.S TIve q tirar um monte de tags por não aceitar HTML
Obrigada!!!
Obrigada
Olá Alessandra,
Acho que você acabou misturando tudo... srsrr... faça o seguinte, antes de qualquer coisa, leia todo o post do meu blog, pelo que percebi vc leu os links que deixei, mas nem todos são pra você usar, eles são apenas pra te dar uma idéia geral.
Depois de ler todo o meu post você vai ver que só foi usado o google-code-prettify , aí basta seguir o que meu blog indica.
Para hospedar o CSS/Javascript vc vai precisar de um outro site fora o blogger pois ele não hospeda, ou ainda tentar descobrir alguém que já tenha hospedado pra você usar em conjunto.
Bem, não sei se está claro... qq coisa pode voltar a perguntar.
T+
Obrigada pela ajuda Jack.
Acabei colocando tudo que podia lá dentro do HTML...
Então sendo assim vo procurar um site para hospedar.. vc tem algum para indicar?
Olá Alessandra...
Dê uma olhada nesse site: http://blog.js-development.com/2008/01/finally-syntax-highlighting-on-my-blog.html
Verifique o código fonte dele e procure por prettify.css e prettify.js aí vc descobre onde ele tá hospedando. ;)
vlw!
Postar um comentário