Hoogtepunt.js

Highlight.js is een syntaxismarkeerstift geschreven in JavaScript. Het werkt zowel in de browser als op de server. Het werkt met vrijwel elke markup, is niet afhankelijk van een framework en heeft automatische taaldetectie.

Aan de slag

Het absolute minimum voor het gebruik van highlight.js op een webpagina is het linken naar de bibliotheek, samen met een van de stijlen en het aanroepen van 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>

Hiermee wordt code in <pre><code>tags gevonden en gemarkeerd. Er wordt geprobeerd de taal automatisch te detecteren. Als automatische detectie bij u niet werkt, kunt u de taal opgeven in het classattribuut:

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

De lijst met ondersteunde taalklassen is beschikbaar in de klassenreferentie . Klassen kunnen ook worden voorafgegaan door language-of lang-.

Om het markeren helemaal uit te schakelen, gebruikt u de nohighlightklasse:

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

Aangepaste initialisatie

Als je wat meer controle nodig hebt over de initialisatie van highlight.js, kun je de functies highlightBlocken gebruiken configure . Hiermee kun je bepalen wat je wilt markeren en wanneer .

Hier is een manier die gelijkwaardig is aan bellen initHighlightingOnLoadmet jQuery:

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

U kunt alle tags gebruiken in plaats van <pre><code>uw code te markeren. Als u geen container gebruikt die regeleinden behoudt, moet u highlight.js configureren om de <br>tag te gebruiken:

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

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

Voor andere opties raadpleegt u de documentatie voor configure.

Webwerkers

U kunt accentuering uitvoeren in een webwerker om te voorkomen dat het browservenster bevriest terwijl u met zeer grote stukken code werkt.

In je hoofdscript:

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

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

Het verkrijgen van de bibliotheek

Je kunt highlight.js verkrijgen als een gehost of op maat gemaakt browserscript of als een servermodule. Het browserscript ondersteunt direct uit de doos zowel AMD als CommonJS, dus als je wilt, kun je RequireJS of Browserify gebruiken zonder dat je dit hoeft te doen. build from source. De servermodule werkt ook prima met Browserify, maar er is de mogelijkheid om een ​​build te gebruiken die specifiek is voor browsers in plaats van iets dat bedoeld is voor een server. Ga naar de downloadpagina voor alle opties.

Link niet rechtstreeks naar GitHub. Het is niet de bedoeling dat de bibliotheek rechtstreeks vanuit de broncode werkt, maar vereist bouwen. Als geen van de voorverpakte opties voor u werkt, raadpleeg dan de bouwdocumentatie .

Het door CDN gehoste pakket beschikt niet over alle talen. Anders zou het te groot zijn. Als u de gewenste taal niet ziet in de sectie 'Algemeen' , kan deze handmatig worden toegevoegd:

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

Op Almond. U moet de optimalisatie gebruiken om de module een naam te geven. Bijvoorbeeld:

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

Licentie

Highlight.js is vrijgegeven onder de BSD-licentie. Zie het LICENTIEbestand voor details.

Koppelingen

De officiële site van de bibliotheek is https://highlightjs.org/ .

Verdere diepgaande documentatie voor de API en andere onderwerpen vindt u op http://highlightjs.readthedocs.io/ .

Auteurs en bijdragers worden vermeld in het bestand AUTHORS.en.txt .