Módulo de comunidad impresionante

Highlight.js

Estado de construcción

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 highlight.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 encontrará y resaltará el código dentro de <pre><code> etiquetas <pre><code> ; intenta detectar el idioma automáticamente. Si la detección automática no funciona para usted, puede especificar el idioma en el atributo de class :

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 deshabilitar el resaltado por nohighlight use la clase nohighlight :

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

Inicialización personalizada

Cuando necesite un poco más de control sobre la inicialización de highlight.js, puede usar el highlightBlock y configure funciones, lo que le permite controlar qué resaltar y cuándo .

Aquí hay una forma equivalente de llamar a 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> para marcar su código. Si no usa un contenedor que conserve los saltos de línea, deberá configurar highlight.js para usar la etiqueta <br> :

1 2 3 4 5
hljs.configure({useBR: true}); $('div.code').each(function(i, block) { hljs.highlightBlock(block); });

Para otras opciones, consulte la documentación para configure .

Trabajadores web

Puede ejecutar el resaltado dentro de un trabajador web para evitar que se congele la ventana del navegador mientras se maneja con grandes trozos de código.

En tu 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); }

Obtener la biblioteca

Puede obtener highlight.js como una secuencia de comandos de navegador alojada o personalizada o como un módulo de servidor. De inmediato, la secuencia de comandos del navegador es compatible con AMD y CommonJS, por lo que si lo desea, puede usar RequireJS o Browserify sin tener que compilar desde la fuente. El módulo del servidor también funciona perfectamente 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 se vincule directamente a GitHub. Se supone que la biblioteca no funciona directamente desde la fuente, es necesario compilar. Si ninguna de las opciones preempaquetadas funciona, 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:

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

Licencia

Highlight.js se publica bajo la licencia BSD. Consulte el archivo LICENCIA para obtener más detalles.

El sitio oficial de la biblioteca está en https://highlightjs.org/ .

Más documentación detallada para la API y otros temas se encuentra en http://highlightjs.readthedocs.io/ .

Los autores y colaboradores se enumeran en el archivo AUTHORS.en.txt .