Depois da nossa migração para o Blogger, decidimos também mudar de syntax highlighter. Estávamos há procura de algo leve e rápido. Na nossa pesquisa encontramos o Prism.
O que é o Prism?
O Prism é um syntax highlighter leve, que corre do lado do cliente. É bastante rápido, fácil de configurar e de aplicar estilos.
Vantagens do Prism
Aqui estão algumas das coisas que mais gostamos no Prism e as razões porque o escolhemos:
- Muito pequeno: ocupa apenas alguns KB. Mesmo adicionando várias linguagens e plugins, o tamanho é inferior a 20 KB.
- Rápido: de todos os syntax highlighters do lado do cliente que testamos, este é definitivamente um dos mais rápidos.
- Fácil de adicionar novas linguagens: é bastante simples e rápido adicionar novas linguagens (baseiam-se em expressões regulares).
- Arquitectura de plugins: não só é fácil criar novos plugins, como isto também mantém o núcleo pequeno e podemos assim escolher apenas as funcionalidades que vamos realmente usar.
- Suporte para linguagens dentro de linguagens: e.g. CSS e JavaScript em HTML.
Desvantagens do Prism
O Prism também tem a sua quota de limitações. Eis alguns dos seus principais defeitos:
- Sem suporte para IE8 ou inferior: apenas IE9+ e outros browsers modernos são suportados.
- Poucas linguagens: como é um syntax highlighter recente, faltam várias linguagens de programação comparando com outros syntax highlighters mais conhecidos e estabelecidos.
- Baseado em expressões regulares: o que significa que irá falhar em certos cenários.
Como usar o Prism
O modo de utilização é parecido ao de outros syntax highlighters. Primeiro, incluem os ficheiros CSS e JS do Prism:
<!DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>Depois envolvem código fonte num bloco pre e code, especificando a linguagem na classe, da seguinte forma:
<pre><code class="language-css">body {
color: #333;
font-family: Arial, sans-serif;
}</code></pre>Como adicionar novas linguagens ao Prism
Aqui estão algumas das linguagens que adicionamos. A sua definição não está completa, mas serve para usos simples.
Como são similares a uma das linguagens base, fizemos uso da funcionalidade de extensão.
ActionScript 3
Prism.languages.as3 = Prism.languages.extend('clike', {
'keyword': /\b(class|dynamic|extends|implements|import|interface|new|case|do|while|else|if|for|in|switch|throw|intrinsic|private|public|static|get|set|function|var|try|catch|finally|while|with|default|break|continue|delete|return|final|each|label|internal|native|override|protected|const|namespace|package|include|use|AS3|super|this|null|Infinity|-Infinity|NaN|undefined|true|false|is|as|instanceof|typeof|void|arguments)\b/g,
'preprocessor': /^\s*#.*/gm,
'number': /\b-?(0x)?\d*\.?\d+\b/g
});C#
Prism.languages.csharp = Prism.languages.extend('clike', {
'keyword': /\b(abstract|as|base|bool|break|byte|case|catch|char|checked|class|const|continue|decimal|default|delegate|do|double|else|enum|event|explicit|extern|false|finally|fixed|float|for|foreach|get|goto|if|implicit|in|int|interface|internal|is|lock|long|namespace|new|null|object|operator|out|override|params|private|protected|public|readonly|ref|return|sbyte|sealed|set|short|sizeof|stackalloc|static|string|struct|switch|this|throw|true|try|typeof|uint|ulong|unchecked|unsafe|ushort|using|virtual|void|while)\b/g,
'string': /@?("|')(\\?.)*?\1/g,
'preprocessor': /^\s*#.*/gm,
'number': /\b-?(0x)?\d*\.?\d+\b/g
});PHP
Prism.languages.php = Prism.languages.extend('clike', {
'variable': /(\$[a-z_]\w+)((-(\>|>)\$?[a-z_]\w+(?!\()))?\b/ig,
'string': /(("|')(\\?.)*?\2)|((<<<|<<<)([a-zA-Z_])[\w\W]+\4;)/g,
'keyword': /\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|extends|private|protected|throw|exit|echo|namespace)\b/g,
'function': /(((-(\>|>)\w+))(?=\())/g,
'constant': /(\b[A-Z_]+\b)|(__FILE__|__DIR__|__LINE__|__METHOD__|__NAMESPACE__|__FUNCTION__|__CLASS__)\b/g,
'number': /\b-?(0x)?\d*\.?\d+\b/g
});Conclusão
Se estão há procura de um syntax highlighter, devem considerar o Prism. Escolhêmo-lo por causa do seu pequeno tamanho, rapidez e extensibilidade.
Achamos que as suas vantagens superam os pontos negativos (sendo o seu maior defeito o facto de não suportar IE8 ou inferior).