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.

Erste Schritte

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>

Liste der unterstützten Sprachkurse an der IS im Erhältlich bei der Klasse Referenz . Auch die Klassen Das Präfix kann entweder language- oder lang- .

Um die Hervorhebung nohighlight zu deaktivieren, verwenden Sie die Klasse nohighlight :

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 enthält nicht 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 .