Fantastisches Community-Modul

Highlight.js

Build-Status

Highlight.js ist ein in JavaScript geschriebener Syntax-Textmarker. Er funktioniert sowohl im Browser als auch auf dem Server. Er funktioniert mit nahezu jedem Markup, hängt nicht von einem Framework ab und verfügt über eine automatische Spracherkennung.

Loslegen

Das absolute Minimum für die Verwendung von Highlight.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 in <pre><code> -Tags gefunden und hervorgehoben. Es wird versucht, die Sprache automatisch zu erkennen. Wenn die automatische Erkennung bei Ihnen nicht funktioniert, können Sie die Sprache im class angeben:

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

Die Liste der unterstützten Sprachkurse ist in der zur Verfügung stehenden Klassenreferenz . Der Unterricht kann auch mit beiden vorangestellt werden , language- oder lang- .

Verwenden Sie die nohighlight Klasse, um die Hervorhebung nohighlight zu deaktivieren:

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

Benutzerdefinierte Initialisierung

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

Hier ist eine äquivalente Methode zum Aufrufen von initHighlightingOnLoad mit jQuery:

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

Sie können anstelle von <pre><code> beliebige Tags verwenden, um Ihren Code zu markieren. Wenn Sie keinen Container verwenden, der Zeilenumbrüche beibehält, müssen Sie Highlight.js konfigurieren, um das <br> -Tag zu verwenden:

1 2 3 4 5
hljs.configure({useBR: true}); $('div.code').each(function(i, block) { hljs.highlightBlock(block); });

Weitere Optionen zum configure in der Dokumentation.

Web Worker

Sie können die Hervorhebung in einem Web Worker ausführen, um ein 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 erhalten

Sie können Highlight.js als gehostetes oder benutzerdefiniertes Browserskript oder als Servermodul erhalten. Das Browserskript unterstützt sofort sowohl AMD als auch CommonJS. Wenn Sie möchten, können Sie RequireJS oder Browserify verwenden, ohne dies zu müssen Build from Source. Das Servermodul funktioniert auch einwandfrei mit Browserify. Es besteht jedoch die Möglichkeit, einen für Browser spezifischen Build anstelle eines für einen Server bestimmten Builds zu verwenden. Alle Optionen finden Sie auf der Download-Seite .

Verlinken Sie nicht direkt mit 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 Gebäudedokumentation .

Das von CDN gehostete Paket verfügt nicht über alle Sprachen. Andernfalls wäre es zu groß. Wenn Sie die gewünschte Sprache im Abschnitt "Allgemein" nicht 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 Mandel. 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 LIZENZ- Datei.

Die offizielle Website für die Bibliothek finden Sie unter https://highlightjs.org/ .

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

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