Resaltar.js
Highlight.js es un resaltador de sintaxis escrito en JavaScript. Funciona tanto en el navegador como en el servidor. Funciona con prácticamente cualquier marcado, no depende de ningún marco y tiene detección automática de idioma.
Empezando
Lo mínimo para usar resaltado.js en una página web es vincular a la biblioteca junto con uno de los estilos y llamar a
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>
Esto buscará y resaltará el código dentro de <pre><code>
las etiquetas; intentará detectar el idioma automáticamente. Si la detección automática no funciona para usted, puede especificar el idioma en el class
atributo:
1<pre><code class="html">...</code></pre>
La lista de clases de idiomas admitidas está disponible en la referencia de clases . Las clases también pueden tener el prefijo language-
o
lang-
.
Para desactivar el resaltado por completo, utilice la nohighlight
clase:
1<pre><code class="nohighlight">...</code></pre>
Inicialización personalizada
Cuando necesites un poco más de control sobre la inicialización de resaltado.js, puedes usar las funciones highlightBlock
y configure
, lo que te permite controlar qué resaltar y cuándo .
Aquí hay una forma equivalente de llamar initHighlightingOnLoad
usando jQuery:
1
2
3
4
5$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
Puede usar cualquier etiqueta en lugar de <pre><code>
marcar su código. Si no usa un contenedor que conserve los saltos de línea, deberá configurar resaltado.js para usar la <br>
etiqueta:
1
2
3
4
5hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});
Para otras opciones, consulte la documentación de configure
.
Trabajadores web
Puede ejecutar el resaltado dentro de un trabajador web para evitar congelar la ventana del navegador mientras trabaja con fragmentos de código muy grandes.
En su 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 trabajador.js:
1
2
3
4
5onmessage = function(event) {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}
Obtener la biblioteca
Puede obtener resaltado.js como un script de navegador alojado o personalizado o como un módulo de servidor. Desde el primer momento, el script del navegador es compatible con AMD y CommonJS, por lo que si lo desea, puede usar RequireJS o Browserify sin tener que hacerlo. compilar desde la fuente. El módulo del servidor también funciona perfectamente bien con Browserify, pero existe la opción de usar una compilación específica para los navegadores en lugar de algo destinado a un servidor. Dirígete a la página de descarga para ver todas las opciones.
No enlace a GitHub directamente. Se supone que la biblioteca no funciona directamente desde el código fuente, requiere compilación. Si ninguna de las opciones empaquetadas funciona para usted, consulte la documentación de compilación .
El paquete alojado en CDN no tiene todos los idiomas. De lo contrario, sería demasiado grande. Si no ve el idioma que necesita en la sección "Común" , puede agregarlo manualmente:
1<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>
En Almond, necesitas usar el optimizador para darle un nombre al módulo. Por ejemplo:
1r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
Licencia
Highlight.js se publica bajo la licencia BSD. Consulte el archivo de LICENCIA para obtener más detalles.
Enlaces
El sitio oficial de la biblioteca es https://highlightjs.org/ .
Encontrará documentación más detallada sobre la API y otros temas en http://highlightjs.readthedocs.io/ .
Los autores y contribuyentes se enumeran en el archivo AUTHORS.en.txt .