Pesquisei e vi que o mais utilizado pela galera é o Syntax Highlighter. Comecei a utilizar ele, porém uma característica dele não me agradou: Ele só pode ser utilizado com a tag
<pre>. O problema da tag <pre> é que quando seu código contém uma linha grande, dependendo do seu layout, ele simplesmente não mostra a linha inteira (o Google Chrome adiciona uma barra horizontal de rolagem, mas mesmo assim fica aparecendo um ícone ? no meio do código) ou mostra a linha passando por cima do que estiver na reta. Por isso eu gosto de usar a tag <code>, o que o Syntax Highlighter não permite. Dessa forma fui buscar outra ferramenta e achei o google-code-prettify.O google-code-prettify além de me permitir usar a tag
<code>, me permite customizar o estilo facilmente via CSS (coisa que o Syntax Highlighter não permite). Olha como é simples usar o google-code-prettify:Passo 1: Adicione esse código na sua página, entre as tags
<head> e </head>:<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>Passo 2: Adicione na tag
<body> um onload='prettyPrint()', ficando assim:...
<body onload='prettyPrint()'>
...Pronto! Agora quando você quiser fazer o highlighting de algum código é só colocar a classe prettyprint na tag
<code>, dessa forma:<code class="prettyprint">
Seu código entra aqui
</code>Só isso?!?! Não preciso falar qual é a linguagem do meu código não?! Não! O google-code-prettify descobre qual é a linguagem e faz o highlighting! =)
Mas se você quiser, pode indicar qual é a linguagem adicionando a classe lang-x onde x é a sigla da linguagem. Você pode ver quais linguagens ele faz o highlighting no README do projeto.
Quer colocar o número das linhas? Simples: adicione a também a classe linenums. Ainda assim não está aparecendo? Isso acontece porque por padrão o google-code-prettify coloca o número da linha apenas para múltiplos de cinco (5, 10, 15, ...). Para colocar o número da linha em todas as linhas, basta adicionar isso no seu CSS:
code ol li {
list-style: decimal !important;
}Dica para que usa o Blogger/Blogspot: Para usar no seu blog, basta adicionar tudo da mesma forma como foi descrito. Lembrando que os passos 1 e 2 devem ser feitos no seu layout, que pode ser editado indo na aba Design e depois em Editar HTML.
Dica para que usa o Gedit: Como esse post tinha alguns códigos em HTML para fazer o highlighting e como para isso tem que escapar as tags HTML substituindo os caracteres < e > pelas suas respectivas sequencias especiais em HTML, adicionei ao Batraquio o snippet Scape HTML tags. Com ele você seleciona um código, aperta Ctrl+Shift+H e ele substitui tudo para você. Assim, você pode escrever seu código normalmente, e quando for fazer o highlighting, usa o snippet =)
Lembrando que diferentemente da tag
<pre> com tag <code> você precisa adicionar uma tag <br /> ao final de cada linha (no Blogger isso é feito automaticamente).Lembrando também que você pode usar a tag
<pre> se preferir.É isso ai! Se quiser mudar o estilo, é só adicionar um CSS com uma borda, uma cor de fundo e o que mais achar que fica legal.
Referências:
[ ]'s
Gostei muito. Estava querendo parar um tempo para fazer a mesma pesquisa que você fez. Me poupou tempo!
ResponderExcluirExcelente tutorial. No meu próximo post coloco em prática!
Cara, o seu post realmente está muito bom, devo afirmar, porém eu acredito que deve estar havendo algum problema no meu blogger, pois ja tentei de todas as maneiras que eu encontrei na internet e os codigos HTML nao aparecem, ainda não tentei em outra linguagem, mas provavelmente deve "funfar" normalmente, mas o HTMl num rola nem fud..*%% , c mais ou menos o que possa ser?
ResponderExcluirabrass
Ah sobre o lance do gEdit pesquisei mas não entendi muito como funciona, então, ainda não tentei, mas teria um passo-a-passo ae se não for muito incomodo?
ResponderExcluirobrigado
Rapaz, não sei o que pode ser não. Se você seguir o passo a passo certinho, funciona perfeitamente.
ResponderExcluirEstava olhando no seu blog que seu código está em tags textarea. Com essa tag você não vai conseguir fazer, além de ser semanticamente incorreto. A tag textarea deve ser usada apenas em formulários. Código deve ser colocado em tags pre ou code. Com isso você também pode retirar as imagens com código que tem em alguns de seus posts, deixando seu blog mais leve e acessível para deficientes visuais.
Sobre o Gedit, adicionei mais algumas informações para facilitar a instalação. Acredito que testando você não terá dificuldades.
Abraço
Parabéns Hugo,
ResponderExcluirEu estava usando o Syntax Highlighter e também não gostei, tem um problema de quebra de linha que nunca deixava o bloco de código dentro da formatação e a numeração de linhas incorreta, seguindo suas instruções a formatação ficou ótima.
Você conhece algum que permite formatar como código de terminal ou vai ser com css mesmo? Segue o exemplo de artigo onde preciso aplicar a formatação como terminal: http://www.criativocomum.com.br/2011/08/modem-huawei-e173s.html.
Obrigado!
Valeu Diego!
ExcluirComo o terminal não tem highlighting, eu apenas crio uma classe 'terminal' no css. Pode ver aqui (http://www.hugomaiavieira.com/search/label/Git) como fica.
Abraço
Este comentário foi removido pelo autor.
ResponderExcluir