PRISM.JS

A biblioteca que nós utilizaremos para fazer a colorização de sintaxe, vamos utilizar o Prism.JS, que além de ser muito bom, como diz o site, é “super rápido”. E tem um bom conjunto de temas pré-definidos e alguns plugins úteis, para que ele possa atender às suas necessidades.

var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'

Como instalar o Prism.JS

Instalar o Prism.JS é muito fácil:

  • Primeiro você precisa fazer o download clicando aqui
  • Após selecionar as opções que você acha que vai atender às suas necessidades, faça o download dos arquivos de script(js) e estilo(css) gerados.
  • Coloque os arquivos nas pastas assets/css e assets/js adequadas, no tema que você estiver utilizando – o conteúdo content/themes/tema/assets/js/prism.js e content/themes/tema/assets/css/prism.css
  • Agora é só adicionarmos esses arquivos em seu layout.

Para fazer isso, abra o arquivo content/themes/theme-name/default.hbs e adicione a tag <link> no head para o css.

...
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  
...

e a tag <script>antes da tag </body>

...
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>  

Pronto

Isso foi fácil. Agora você está pronto para começar a usar a colorização de sintaxe utilizando os recursos fornecidos pelo Prism.JS. O modo como funciona é procurando por um elemento <code class="language-*"></code>, ou no ghost, “`language-javascript em seu código. Então você só precisa adicionar a classe adequada para o seu bloco de código, assim:

```language-javascript
var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'
// é necessário colocar ``` para finalizar a marcação do bloco de código

E aqui está como o código é renderizado.

var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'