Ressaltar.js

Highlight.js és un marcador de sintaxi escrit en JavaScript. Funciona tant al navegador com al servidor. Funciona amb pràcticament qualsevol marcatge, no depèn de cap marc i té detecció automàtica d'idioma.

Començant

El mínim necessari per utilitzar highlight.js en una pàgina web és enllaçar a la biblioteca juntament amb un dels estils i cridar 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>

Això trobarà i ressaltarà el codi dins de <pre><code>les etiquetes; intentarà detectar l'idioma automàticament. Si la detecció automàtica no us funciona, podeu especificar l'idioma a l' classatribut:

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

La llista de classes d'idiomes admeses està disponible a la referència de classe . Les classes també es poden prefixar amb language-o lang-.

Per desactivar completament el ressaltat, utilitzeu la nohighlightclasse:

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

Inicialització personalitzada

Quan necessiteu una mica més de control sobre la inicialització de highlight.js, podeu utilitzar les funcions highlightBlocki configure . Això us permet controlar què ressaltar i quan .

Aquí hi ha una manera equivalent de trucar initHighlightingOnLoadamb jQuery:

1
2
3
4
5
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

Podeu utilitzar qualsevol etiqueta en comptes de <pre><code>marcar el vostre codi. Si no feu servir un contenidor que preservi els salts de línia, haureu de configurar highlight.js per utilitzar l' <br>etiqueta:

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

Per a altres opcions, consulteu la documentació de configure.

Treballadors web

Podeu executar el ressaltat dins d'un treballador web per evitar congelar la finestra del navegador mentre tracteu trossos de codi molt grans.

Al teu guió 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);
})

A 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);
}

Aconseguint la Biblioteca

Podeu obtenir highlight.js com a script de navegador allotjat o personalitzat o com a mòdul de servidor. Des de la caixa, l'script del navegador admet AMD i CommonJS, de manera que si ho voleu podeu utilitzar RequireJS o Browserify sense haver de fer-ho. compilació des de la font. El mòdul del servidor també funciona perfectament amb Browserify, però hi ha l'opció d'utilitzar una compilació específica per als navegadors en lloc d'alguna cosa destinada a un servidor. Aneu a la pàgina de descàrrega per veure totes les opcions.

No enllaceu directament a GitHub. Se suposa que la biblioteca no ha de funcionar directament des de la font, cal construir-la. Si cap de les opcions preempaquetades us funciona, consulteu la documentació de construcció .

El paquet allotjat al CDN no té tots els idiomes. En cas contrari, seria massa gran. Si no veieu l'idioma que necessiteu a la secció "Comú" , podeu afegir-lo manualment:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

A Almond. Heu d'utilitzar l'optimitzador per donar un nom al mòdul. Per exemple:

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

llicència

Highlight.js es publica sota la llicència BSD. Vegeu el fitxer LLICÈNCIA per obtenir més informació.

Enllaços

El lloc oficial de la biblioteca és a https://highlightjs.org/ .

Trobareu més documentació detallada per a l'API i altres temes a http://highlightjs.readthedocs.io/ .

Els autors i col·laboradors s'enumeren al fitxer AUTHORS.en.txt .