Módulo comunitario incrible

Highlight.js

Estado de compilación

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.

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 .