Highlight.js

Highlight.js é un resaltador de sintaxe escrito en JavaScript. Funciona tanto no navegador como no servidor. Funciona con case calquera marcado, non depende de ningún framework e ten detección automática de linguaxe.

Comezando

O mínimo imprescindible para usar highlight.js nunha páxina web é ligar á biblioteca xunto cun dos estilos e chamar initHighlightingOnLoad:

1
2
3
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Isto atopará e resaltará o código dentro das <pre><code>etiquetas; tenta detectar o idioma automaticamente. Se a detección automática non funciona, pode especificar o idioma no classatributo:

1
<pre><code class="html">...</code></pre>

A lista de clases de idiomas compatibles está dispoñible na referencia de clase . As clases tamén poden ir prefixadas con language-ou lang-.

Para desactivar o resaltado, use a nohighlightclase:

1
<pre><code class="nohighlight">...</code></pre>

Inicialización personalizada

Cando precisa un pouco máis de control sobre a inicialización de highlight.js, pode usar as funcións highlightBlocke configure. Isto permítelle controlar que resaltar e cando .

Aquí tes un xeito equivalente de chamar initHighlightingOnLoadusando jQuery:

1
2
3
4
5
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

Podes usar calquera etiqueta no canto de <pre><code>marcar o teu código. Se non utilizas un contedor que conserva os saltos de liña, terás que configurar highlight.js para usar a <br>etiqueta:

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

Para outras opcións consulte a documentación de configure.

Traballadores web

Pode executar o resaltado dentro dun traballador web para evitar conxelar a xanela do navegador mentres se trata de anacos de código moi grandes.

No seu guión principal:

1
2
3
4
5
6
addEventListener('load', function() {
  var code = document.querySelector('#code');
  var worker = new Worker('worker.js');
  worker.onmessage = function(event) { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
})

En worker.js:

1
2
3
4
5
onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}

Obtendo a biblioteca

Podes obter highlight.js como script de navegador aloxado ou personalizado ou como módulo de servidor. De inmediato, o script do navegador admite AMD e CommonJS, polo que se o desexas podes usar RequireJS ou Browserify sen ter que build from source. O módulo de servidor tamén funciona perfectamente con Browserify, pero existe a opción de usar unha compilación específica para navegadores en lugar de algo destinado a un servidor. Diríxete á páxina de descarga para todas as opcións.

Non ligue directamente a GitHub. Non se supón que a biblioteca funciona directamente desde a fonte, é necesaria a construción. Se ningunha das opcións empaquetadas previamente funciona para vostede, consulte a documentación do edificio .

O paquete aloxado en CDN non ten todos os idiomas. Se non, sería demasiado grande. Se non ves o idioma que necesitas na sección "Común" , pódese engadir manualmente:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

En Almond. Debe usar o optimizador para darlle un nome ao módulo. Por exemplo:

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Licenza

Highlight.js libérase baixo a licenza BSD. Consulte o ficheiro LICENSE para máis detalles.

Ligazóns

O sitio oficial da biblioteca está en https://highlightjs.org/ .

En http://highlightjs.readthedocs.io/ hai máis documentación en profundidade sobre a API e outros temas .

Os autores e colaboradores están listados no ficheiro AUTHORS.en.txt .