O público alvo deste blog - hã... eu não sabia que este blog tinha público mas... deixa pra lá, vamos continuar. Voltando, o público alvo inclui gente que não apenas copia e cola meus scripts, mas também aqueles que gostam de ler, estudar, aprender, modificar e fazer seja lá o que passa em suas cabeças insanas.
Deixando de enrolação, é feio pra burro ler código preto. Se considerar que alguém quer aprender alguma coisa com isto e não tem todo o tempo do mundo, então precisamos facilitar as coisas. Código colorido para facilidade de leitura. Também conhecido como Realce de sintaxe ou Syntax highlighting.
Então vamos começar de forma simples. Eu uso o google-code-prettify . Para quem sabe inglês pode simplesmente ler o arquivo README e começar usar. Mas para aqueles que precisam de mais detalhes, então vamos lá.
No seu blog vá em Design - Editar HTML e cole o seguinte código imediatamente acima da tag </head>:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>Procure pela tag <body> e modifique da seguinte forma: <body onload='prettyPrint()'>.
Pronto, agora você já pode usar <pre class="prettyprint"> ... </pre> para colorir blocos de código, exatamente como está ali no parágrafo anterior. Ou então <code class="prettyprint"> ... </code> para código no meio do texto, exatamente como estou fazendo aqui, neste parágrafo.
Bom, mas ainda temos dois problemas: 1) códigos com linhas muito longas vão estragar o layout do seu blog; e 2) códigos com muitas linhas vão encher demais sua página e se você tem algo a escrever antes e depois dele vai ficar ruim para leitura.
Para resolver isso, vamos definir uma altura máxima para os blocos de códigos. Bem como deixar com uma barra de rolagem, caso ultrapasse os limites. Novamente em vá em Design - Editar HTML e cole o seguinte código imediatamente acima da tag </head>: <style type='text/css'>
<!--
pre.prettyprint {
max-height: 350px;
overflow: auto;
}
-->
</style>
Tudo resolvido, por enquanto é só. Mas fiquem ligados que ainda vou trazer mais dicas para esse mesmo assunto.
- Mas porque não agora? - leitor.
- Hã... porque ainda não sei como fazer...
br_lemes, o Elfo insano (Obsessivo)
Theme by Breno Ramalho Lemes under Creative Commons Attribution, based on Jekyll Clean by Scott Emmons and icons by FatCow.