Highlight.js
Highlight.js é un resaltador de sintaxe escrito en JavaScript. Funciona no navegador e no servidor. Funciona con case calquera marcado, non depende de ningún marco 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 class
atributo:
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 nohighlight
clase:
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 highlightBlock
e configure
. Isto permítelle controlar que resaltar e cando .
Aquí tes un xeito equivalente de chamar initHighlightingOnLoad
usando 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
5hljs.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
6addEventListener('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
5onmessage = 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:
1r.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 .