Highlight.js

Highlight.js ist ein in JavaScript geschriebener Syntax-Highlighter. Er funktioniert sowohl im Browser als auch auf dem Server. Er funktioniert mit so ziemlich jedem Markup, ist von keinem Framework abhängig und verfügt über eine automatische Spracherkennung.

Erste Schritte

Das absolute Minimum für die Verwendung von highlights.js auf einer Webseite ist die Verknüpfung mit der Bibliothek zusammen mit einem der Stile und der Aufruf von 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>

Dadurch wird Code innerhalb von Tags gefunden und hervorgehoben <pre><code>; es wird versucht, die Sprache automatisch zu erkennen. Wenn die automatische Erkennung bei Ihnen nicht funktioniert, können Sie die Sprache im classAttribut angeben:

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

Die Liste der unterstützten Sprachklassen finden Sie in der Klassenreferenzlanguage- . Klassen können auch entweder oder vorangestellt werden lang-.

Um die Hervorhebung vollständig zu deaktivieren, verwenden Sie die nohighlightKlasse:

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

Benutzerdefinierte Initialisierung

Wenn Sie etwas mehr Kontrolle über die Initialisierung von highlights.js benötigen, können Sie die Funktionen highlightBlockund verwenden configure . Auf diese Weise können Sie steuern, was wann hervorgehoben werden soll .

Hier ist eine äquivalente Methode zum Aufruf initHighlightingOnLoadmit jQuery:

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

Sie können beliebige Tags verwenden, anstatt <pre><code>Ihren Code zu markieren. Wenn Sie keinen Container verwenden, der Zeilenumbrüche beibehält, müssen Sie highlight.js für die Verwendung des <br>Tags konfigurieren:

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

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

Weitere Optionen finden Sie in der Dokumentation zu configure.

Web-Worker

Sie können die Hervorhebung in einem Web-Worker ausführen, um zu vermeiden, dass das Browserfenster beim Bearbeiten sehr großer Codeblöcke einfriert.

In Ihrem Hauptskript:

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

Die Bibliothek bekommen

Sie können Highlight.js als gehostetes oder benutzerdefiniertes Browser-Skript oder als Servermodul erhalten. Das Browser-Skript unterstützt sofort AMD und CommonJS, sodass Sie bei Bedarf RequireJS oder Browserify verwenden können, ohne dies tun zu müssen Build aus dem Quellcode. Das Servermodul funktioniert auch einwandfrei mit Browserify, es besteht jedoch die Option, einen Build speziell für Browser zu verwenden, anstatt etwas, das für einen Server gedacht ist. Gehen Sie zur Download-Seite für alle Optionen.

Verlinken Sie nicht direkt auf GitHub. Die Bibliothek soll nicht direkt von der Quelle aus funktionieren, sondern muss erstellt werden. Wenn keine der vorgefertigten Optionen für Sie funktioniert, lesen Sie die Erstellungsdokumentation .

Das vom CDN gehostete Paket verfügt nicht über alle Sprachen. Andernfalls wäre es zu groß. Wenn Sie die benötigte Sprache nicht im Abschnitt „Allgemein“ sehen , können Sie sie manuell hinzufügen:

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

Auf Almond. Sie müssen den Optimierer verwenden, um dem Modul einen Namen zu geben. Zum Beispiel:

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

Lizenz

Highlight.js wird unter der BSD-Lizenz veröffentlicht. Weitere Informationen finden Sie in der LIZENZ- Datei.

Links

Die offizielle Website der Bibliothek ist https://highlightjs.org/ .

Weitere ausführliche Dokumentation zur API und anderen Themen finden Sie unter http://highlightjs.readthedocs.io/ .

Autoren und Mitwirkende sind in der Datei AUTHORS.en.txt aufgeführt .