COMO INSTALAR O SYNTAX HIGHLIGHTER NO BLOG

Criar os artigos em blog que usam quaisquer trechos de código script dentro sem usar o estilo vai parecer tão complicado, especialmente se você usar um código muito lingo. Certamente, seria melhor se trechos de código de script fosse exibido com estilo diferente com tamanho especial com fontes diferenciada usando cores diferentes ​​dependendo do tipo e trechos de código script. Assim, a exibição do código de script trechos mais estruturado, fácil de entender e parece mais beleza para o conteúdo do nosso conteúdo do blog.

A sintaxe dá uma solução nesse caso, os trechos de código de script parece escrito em uma sintaxe automática de programa de software. Ela dá um visual mais elegante ao artigo do seu blog.

Modelos de Syntax Highlighter

shThemeRDark

shThemeDjango

shThemeDefault

shThemeEclipse

shThemeEmacs

shThemeMidnight

shThemeFadeToGrey

Como colocar nas postagens do blogger

Primeiramente é necessário escolher uma das aparências acima, feito isso procurar o tema correspondente na caixa abaixo:

<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shThemeRDark.css' rel='stylesheet' type='text/css'/>
 

Após o tema escolhido ter sido encontrado cole ele em algum lugar, por exemplo bloco de notas, iremos montar o código para colocarmos no HTML de nosso blog.

Escolha o formato de código que você deseja usar no seu blog, nesse caso pode ser mais de um.

<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushColdFusion.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushCpp.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushDelphi.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushDiff.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushGroovy.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushJScript.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushPerl.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushPhp.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushPlain.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushPowerShell.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushPython.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushRuby.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushScala.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushXml.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shCore.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushAS3.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushBash.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushCSharp.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushCss.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushErlang.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushJavaFX.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushJava.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushSql.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/shBrushVb.js' type='text/javascript'></script> 

Lembrando que cada número na caixa corresponde a um tema e/ou um formato de código.

Agora vamos montar o código para colocar no seu blog, edite o código abaixo conforme o indicado.

**COLOCAR AQUI OS FORMATOS DE CÓDIGO, VOCÊ PODE COLOCAR MAIS QUE 1**
<link href='https://sites.google.com/site/wwwcomosefezcom/luzardoperes/styles-shCore.css' rel='stylesheet' type='text/css'/>
**COLOCAR TEMA AQUI**
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Colocar o código no HTML blog para usar nas postagens

1. Ir em Modelo, Editar HTML, pressione Ctrl + F no código do seu blog e procure por </body> ,  acima da tag colocar o código acima já editado.

2. Para colocar códigos nas postagens com o visual desejado, ao editar uma postagem ir em editar HTML e colar um dos códigos abaixo.

<pre class="brush:html"> COLOQUE SEU CÓDIGO HTML AQUI</pre>
<pre class="brush:css">COLOQUE SEU CÓDIGO CSS AQUI</pre>
<pre class="brush:js">COLOQUE SEU CÓDIGO javascript ou jquery AQUI</pre>
<pre class="brush:php">COLOQUE SEU CÓDIGO PHP AQUI</pre>
<pre class="brush:sql">COLOQUE SEU CÓDIGO sql OU database AQUI</pre>

Você sempre irá usar um desses códigos, isso se dará através do formato de código que você irá postar, seja ele HTML, CSS, Javascript, PHP, SQL, etc. No lugar onde diz coloque se código (...) aqui, você deve colocar o código que vai postar, mas para que dê tudo certo você precisa converter o código para texto simples para isso use nosso Conversor de Código HTML, feito isso pode colar o código convertido na postagem publicar a postagem e tudo estará conforme o esperado.

Se você tem o costume de publicar códigos no seu blog com frequência, pode automatizar isso indo em Configurações, Postagens e comentários e ao lado de Modelo de postagem clique em Adicionar. Dentro da caixa cole o código acima e salve as configurações. Assim sempre que você for editar uma nova postagem o código já estará no editor.

Essa é uma forma bastante prática para publicar códigos em seu blog. E você já conhecia essa ferramenta? Quer deixar sua opinião? Basta escrever um comentário.

19:22:00