Estava querendo fazer isso já há um tempinho porém sempre enrolava. Vou começar logo então.
Primeiro post vou falar sobre o SyntaxHighlighter, que é uma ferramenta em javascript para adicionar o syntax highlight nos trechos de código postados em um website/blog.
Pode ser baixado em SyntaxHighlighter.
A versão que eu estou utilizando nesse post é 3.0.83.
Feito o download, segue a estrutura de diretórios:
Iremos obrigatoriamente usar o arquivo 'src/shCore.js' e 'styles/shCore.css'.
Depois podemos escolher outros arquivos para as determinadas linguagens em que usaremos o syntax highlight.
Para usar esses arquivos, eu utilizei o sites.google.com para disponibiliza-los na web. Acredito que possa ser utilizado o DropBox também.
Após feito o upload dos arquivos que você quer utilizar, deve-se seguir os passos:
1. entrar na aba 'Modelo' do painel de administração do blogger.
2. editar hmtl
3. ao fim da tag <head> (ctrl+f </head) colar o seguinte codigo.
4. salvar as alterações.
<link href="http://ondeestouhospedado/shCore.css" rel="stylesheet" type="text/css" /> <link href="http://ondeestouhospedado/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://ondeestouhospedado/shCore.js" type="text/javascript"></script> <script src="http://ondeestouhospedado/shBrushCss.js" type="text/javascript"></script> <script src="http://ondeestouhospedado/shBrushJava.js" type="text/javascript"></script> <script src="http://ondeestouhospedado/shBrushJScript.js" type="text/javascript"></script> <script src="http://ondeestouhospedado/shBrushRuby.js" type="text/javascript"></script> <script src="http://ondeestouhospedado/shBrushXml.js" type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all() </script>
Depois faça um teste com uma publicação no blog para confirmar se deu certo.
É só usar um bloco de código em volta da tag <pre> e informar a linguagem no attributo 'class'.
Ex:
<pre class="brush: java" >
public static void main(String args[]) {
System.out.println("Hello, Arthur!");
}
</pre>
Resultado:
public static void main(String args[]) {
System.out.println("Hello, Arthur!");
}
Eu particularmente escolhi as linguagens css, java, js, ruby e xml (para html também). Porém diversos outros arquivos para aplicar o sh em outras linguagens são disponibilizados.
Então é isso aí.
Nenhum comentário:
Postar um comentário