Tolles Community-Modul

Highlight.js

Build-Status

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

Einstieg

Das absolute Minimum für die Verwendung von Highlight.js auf einer Webseite ist das Verknüpfen mit der Bibliothek zusammen mit einem der Stile und das Aufrufen 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 <pre><code>Tags gefunden und hervorgehoben ; es versucht, die Sprache automatisch zu erkennen. Wenn die automatische Erkennung für Sie 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 Klassenreferenz Klassen können auch mit language-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 ein bisschen mehr Kontrolle über die Initialisierung von highlight.js benötigen, können Sie die Verwendung highlightBlockund configure Funktionen. Diese Sie steuern können , was zu markieren und wenn .

Hier ist eine äquivalente Methode zum Aufrufen 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 so konfigurieren, dass das <br>Tag verwendet wird:

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.

Webworker

Sie können die Hervorhebung in einem Webworker ausführen, um das Einfrieren des Browserfensters zu vermeiden, während Sie mit sehr großen Codestücken arbeiten.

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 Browserskript oder als Servermodul erhalten. Das Browserskript unterstützt sowohl AMD als auch CommonJS Build from source.Das Servermodul funktioniert auch perfekt mit Browserify, aber es gibt die Möglichkeit, ein browserspezifisches Build anstelle eines für einen Server bestimmten Builds zu verwenden.Auf der Download-Seite finden Sie alle Optionen.

Verlinken Sie nicht direkt auf GitHub. Die Bibliothek soll nicht direkt aus der Quelle funktionieren, sie muss erstellt werden. Wenn keine der vorgefertigten Optionen für Sie funktioniert, schlagen Sie in der Baudokumentation nach .

Das vom CDN gehostete Paket enthält nicht alle Sprachen. Andernfalls wäre es zu groß. Wenn die gewünschte Sprache nicht im Abschnitt "Allgemein" angezeigt wird , kann sie manuell hinzugefügt werden:

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. 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 LICENSE- Datei.

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 .