Resaltar.js

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

Comezando

O mínimo necesario 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 che funciona, podes especificar o idioma no classatributo:

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

A lista de clases de idiomas admitidas está dispoñible na referencia da clase . As clases tamén se poden prefixar con language-ou lang-.

Para desactivar o resaltado por completo, use a nohighlightclase:

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

Inicialización personalizada

Cando necesites un pouco máis de control sobre a inicialización de highlight.js, podes usar as funcións highlightBlocke configure . Isto permíteche controlar o 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 en lugar de <pre><code>marcar o teu código. Se non utilizas un contedor que preserve 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 con anacos moi grandes de código.

No teu 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);
}

Conseguindo a Biblioteca

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

Non ligues directamente a GitHub. Se supón que a biblioteca non funciona directamente desde a fonte, é necesario construír. Se ningunha das opcións pre-empaquetadas funciona para ti, consulta 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. Debes 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 publícase baixo a licenza BSD. Consulta o ficheiro LICENZA para obter máis información.

Ligazóns

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

Máis documentación detallada para a API e outros temas en http://highlightjs.readthedocs.io/ .

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