PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

12/02/2014

Prettify Syntax Highlighter no Blogger

Prettify Syntax Highlighter no Blogger - Visual Dicas

O que é Syntax Highlighter

Para quem não sabe, Syntax Highlighter (Realce de sintaxe) é uma funcionalidade disponível em alguns editores de texto ou em alguns CMS - Sistema de gerenciamento de conteúdo (Content Management System em inglês), que altera a formatação de parte do conteúdo de um blog, permitindo que seus leitores possam entender melhor os códigos de programação publicados.

É ideal para quem quer compartilhar ou exemplificar trechos de programação, códigos e/ou scripts em HTML, JavaScritp, CSS, PHP, Java, Asp, etc…. Veja um exemplo abaixo:

Prettify Syntax Highlighter no Blogger - Visual Dicas

Como o Blogger não possui esta funcionalidade por padrão, vamos mostrar neste artigo como inserir o recurso Prettify Syntax Highlighter no seu blog.

Instalando o recurso no Blogger

Acesse o Blogger: www.blogger.com

Se você ainda não está conectado no Google, faça o login com seu e-mail e senha.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Escolha qual blog você deseja inserir o Prettify Syntax Highlighter. No nosso exemplo vamos escolher o Blog de Teste.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Abra em em [Modelo].

Prettify Syntax Highlighter no Blogger - Visual Dicas

Clique no botão [Editar HTML].

Atenção: Antes de acessar o modo HTML do Blogger, recomendamos que você faça um backup completo do template, widgets e de todos os posts publicados. O Visual Dicas não se responsabiliza por eventuais problemas que possam acontecer ao seu blog.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Clique no local do código e utilizando a tecla de atalho [CTRL+F], localize a tag </body>.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Copie o código abaixo (tema default).

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Cole o código copiado imediatamente acima da tag </body>.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Você poderá mudar o tema do seu Prettify Syntax Highlighter. Clique no link Gallery of themes for code prettify para ver todos temas disponíveis.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Basta mudar o código que mostramos anteriormente (tema default), acrescentando o novo tema escolhido.

No nosso exemplo vamos utilizar o tema Sons-Of-Obsidian. Veja abaixo, que usamos o código do tema default + o incremento ?skin= o tema escolhido. Veja como fica o código completo:

Obs.: Use sempre letras minúsculas para o tema escolhido:

script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian”></script>

Agora, da mesma forma que mostramos anteriormente, cole o código no modelo HTML do Blogger, antes da tag </body>.

Clique no botão [Visualizar modelo], e se tudo funciona normalmente, clique em [Salvar modelo] para acrescentar o código de forma efetiva.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Usando o Prettify Syntax Highlighter

Para publicar um código qualquer utilizando o Prettify Syntax Highlighter, basta adicionar class=”prettyprint” na tag <pre> ou <code> no seu editor HTML do Blogger ou do Live Writer, se você estiver utilizando este software no momento.

Utilizaremos o seguinte código como exemplo:

<pre class="prettyprint">
 $(function() {
alert('I am using Prettify as Syntax Highlighter');
});
 </pre>

Veja o exemplo abaixo no editor HTML do Blogger:

Prettify Syntax Highlighter no Blogger - Visual Dicas

Após publicarmos o post, veja como fica o resultado final no Blog de Teste.

Prettify Syntax Highlighter no Blogger - Visual Dicas

Acrescentando linhas no Syntax Highlighter

Para acrescentar linhas, basta adicionara class="prettyprint linenums” na tag <pre> ou <code> no seu editor HTML.

Utilizaremos o seguinte código como exemplo:

<pre class="prettyprint linenums">
 $(function() {
  alert('I am using Prettify as Syntax Highlighter');
});
</pre>

Veja o resultado final no Blog de Teste

Prettify Syntax Highlighter no Blogger - Visual Dicas

Veja os dois exemplos no Blog de Teste

Prettify Syntax Highlighter no Blogger - Visual Dicas

byALF

1 comentários:

Unknown disse...

Não consegui

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics