Bloco de código com HighlightJS | Café ++
Publicado: 29/08/2017 - Everson Vansoski

Bloco de código com HighlightJS

Adicionando blocos de código em seu site ou blog

Se você administra algum site ou blog com conteúdos relacionados à programação, pode ser constante a inserção de códigos nos artigos. Para tornar esses códigos mais agradáveis e visualmente próximos aos editores de texto, foram criados os Syntax Highlighters. Nós aqui do Café ++ utilizamos o HighlightJS que é um dos mais completos, com mais de 170 linguagens e 79 estilos diferentes.

A aplicação é imples, basta adicionar o JavaScript do plugin e CSS com o estilo escolhido, além de especificar a linguagem escolhida para cada bloco de código. Veja o exemplo abaixo:

<link rel="stylesheet" href="styles/androidstudio.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Em seguida, adicione os blocos de código

<pre>
	<code class="html">
	<!--seu código aqui-->
	</code>
</pre>

<pre>
	<code class="javascript">
	//seu código aqui
	</code>
</pre>

Note que o que configura a formatação de acordo com a linguagem é a classe da tag CODE.
OBS.
Você deve usar um HTML Encoder para converter seu código, caso contrário o navegador irá interpretá-lo, dependendo da linguagem.

Everson Vansoski
Analista de Sistemas no setor de contact center em São Paulo - SP