Sintaxe Destacada via Javascript

Basicamente, qualquer editor de código que se preze conta com um mecanismo de iluminação de sintaxe, mais ou menos configurável ao gosto do freguês. Entretanto, exibir códigos corretamente formatados em páginas HTML já constitui um desafio um pouco mais complexo, haja vista as tags CODE e PRE não serem nativamente dotadas da inteligência necessária para reconhecer código de programação e exibir o conteúdo de acordo.

Existem muitas maneiras de se contornar este problema. Nos meus blogs em WordPress gosto do plugin Crayon Syntax Highlighter, embora ele tenha, assim como centenas de outros plugins, problemas de vulnerabilidades que permitem a um invasor subir e executar scripts arbitrários para o servidor (veja como evitar 80% dos problemas de invasão do WordPress).

Mas quem não tem blogs em WP precisa poder contar com alternativas, e a minha favorita é o script Highlight.js, que com apenas três linhas de código na página HTML é capaz de embelezar código escrito em diversas linguagens.

O pulo do gato é o código a seguir:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Caso você queira usar um outro estilo que não o default você só tem que alterar o nome da folha de estilo na primeira linha de código acima: onde está default.min.css você troca para o nome do estilo que quer.

E para você? Qual é a maneira mais eficiente de exibir código formatado e colorido nas suas páginas?