highlight.js
v11.11.0 - Happy Holidays
Highlight.js ist ein in javaScript geschriebener Syntax Highlighter. Es funktioniert sowohl im Browser als auch im Server. Es kann mit so ziemlich jedem Markup funktionieren, hängt nicht von anderen Frameworks ab und verfügt über eine automatische Spracherkennung.
Inhalt
requireimportWie immer enthalten große Veröffentlichungen Bruchänderungen, die möglicherweise Maßnahmen von Benutzern erfordern. Bitte lesen Sie Version_11_Upgrade.md, um eine detaillierte Zusammenfassung der Bruchänderungen und alle Aktionen zu erhalten, die Sie möglicherweise ergreifen müssen.
Langfristige Supportinformationen finden Sie unter Security.md.
Das nötige Minimum für die Verwendung von highlight.js auf einer Webseite besteht darin, zusammen mit einem der Themen mit der Bibliothek zu verknüpfen und highlightAll anzurufen:
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > Dadurch wird Code in <pre><code> Tags gefunden und hervorgehoben. Es versucht, die Sprache automatisch zu erkennen. Wenn die automatische Erkennung für Sie nicht funktioniert oder Sie einfach nur ausdrücklich explizit sind, können Sie die Sprache manuell angeben, indem Sie das class verwenden:
< pre > < code class =" language-html " > ... </ code > </ pre > Verwenden Sie die plaintext , um das Styling von Highlight.js auf Klartext anzuwenden, ohne sie tatsächlich hervorzuheben:
< pre > < code class =" language-plaintext " > ... </ code > </ pre > Verwenden Sie die nohighlight -Klasse, um das Hervorheben eines Codeblocks vollständig zu überspringen:
< pre > < code class =" nohighlight " > ... </ code > </ pre >Das Minimum zur automatischen Erkennung der Sprache und zum Hervorhebung von Code.
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valueSo laden Sie nur eine "gemeinsame" Untergruppe populärer Sprachen:
hljs = require ( 'highlight.js/lib/common' ) ; Verwenden Sie highlight , um Code mit einer bestimmten Sprache hervorzuheben:
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value Weitere Beispiele für die von highlight oder highlightAuto zurückgegebenen Beispiele für das von Highlight oder HighlightAuto zurückgegebene Ergebnisobjekt finden Sie importieren Sie die Bibliothek für weitere require für die Nutzung import usw. Weitere Informationen zum Ergebnisobjekt finden Sie in den API -Dokumenten.
Highlight.js unterstützt über 180 Sprachen in der Kernbibliothek. Es gibt auch Sprachdefinitionen von Drittanbietern, um noch mehr Sprachen zu unterstützen. Die vollständige Liste der unterstützten Sprachen finden Sie in Supportd_Languages.md.
Wenn Sie eine etwas mehr Kontrolle über die Initialisierung von lighlight.js benötigen, können Sie die highlightElement verwenden und Funktionen configure . Auf diese Weise können Sie besser kontrollieren, was Sie hervorheben müssen und wann .
Hier ist beispielsweise das grobe Äquivalent zum Aufrufen highlightAll , aber stattdessen manuell die Arbeit manuell:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; Weitere Informationen finden Sie in der Dokumentation, um Optionen zu configure .
Wir empfehlen nachdrücklich <pre><code> Wraping für Codeblöcke. Es ist ziemlich semantisch und "einfach funktioniert" mit null fummeln. Es ist möglich, andere HTML -Elemente (oder Combos) zu verwenden. Möglicherweise müssen Sie jedoch besondere Aufmerksamkeit auf die Aufrechterhaltung von Linienausbrüchen achten.
Nehmen wir an, Ihr Markup für Codeblöcke verwendet Divs:
< div class =' code ' > ... </ div >Solche Blöcke manuell hervorzuheben:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; Ohne ein Tag zu verwenden, das LineBreaks (wie pre ) erhalten, benötigen Sie zusätzliche CSS, um sie zu erhalten. Sie können auch Vor- und Nachbearbeitungspausen mit einem Plug-In vorhanden, aber wir empfehlen die Verwendung von CSS .
LineBreaks in einem div unter Verwendung von CSS erhalten:
div . code {
white-space : pre;
}Siehe HighlightJS/Vue-Plugin für ein einfaches Vue-Plugin, das mit highlight.js hervorragend funktioniert.
Ein Beispiel für vue-plugin in Aktion:
< div id =" app " >
<!-- bind to a data property named `code` -->
< highlightjs autodetect :code =" code " />
<!-- or literal code works as well -->
< highlightjs language =' javascript ' code =" var x = 5; " />
</ div >Sie können in einem Webarbeiter hervorheben, um das Einfrieren des Browserfensters zu vermeiden, während Sie sich mit sehr großen Codebrocken befassen.
In Ihrem Hauptskript:
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;In Worker.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; Zunächst werden Sie die Bibliothek wahrscheinlich über npm oder yarn installieren - siehe die Bibliothek.
requireWenn die Bibliothek der obersten Ebene erforderlich ist, wird alle Sprachen geladen:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valueLaden Sie für einen kleineren Fußabdruck unsere gemeinsame Untergruppe von Sprachen (der gleiche Satz, der für unseren Standard -Web -Build verwendet wird).
const hljs = require ( 'highlight.js/lib/common' ) ;Lasten Sie für den kleinsten Fußabdruck nur die Sprachen, die Sie benötigen:
const hljs = require ( 'highlight.js/lib/core' ) ;
hljs . registerLanguage ( 'xml' , require ( 'highlight.js/lib/languages/xml' ) ) ;
const highlightedCode = hljs . highlight ( '<span>Hello World!</span>' , { language : 'xml' } ) . valueimportDer Standardimport registriert alle Sprachen:
import hljs from 'highlight.js' ;Es ist effizienter, nur die Bibliothek zu importieren und die von Ihnen benötigten Sprachen zu registrieren:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Wenn Ihr Build -Tool CSS -Importe verarbeitet, können Sie das Thema auch direkt als Modul importieren:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; Hinweis: Im Moment möchten Sie @highlightjs/cdn-assets Paket anstelle von highlight.js installieren. Siehe Download Prebuilt CDN Assets
Um die Bibliothek zu importieren und nur die Sprachen zu registrieren, die Sie benötigen:
import hljs from './assets/js/@highlightjs/cdn-assets/es/core.js' ;
import javascript from './assets/js/@highlightjs/cdn-assets/es/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Um die Bibliothek zu importieren und alle Sprachen zu registrieren:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;Hinweis: Der Pfad zu diesen Dateien hängt davon ab, wo Sie sie in Ihrem Projekt oder Ihrer Website installiert/kopiert haben. Der obige Weg ist nur ein Beispiel.
Sie können importmap auch verwenden, um auf ähnliche Weise wie Knoten zu importieren:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > Verwenden Sie den obigen Code in Ihrem HTML. Danach kann Ihr JavaScript mit dem benannten Schlüssel aus Ihrem importmap importieren, z. B. in diesem Fall @highlightjs :
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Hinweis: Sie können auch direkt aus vollständigen URLs importieren, z. B. unsere eigenen vorgefertigten ES6-Modul-CDN-Ressourcen. Weitere Beispiele finden Sie unter CDN Fetch über CDN.
Sie können Highlight.js als gehostete oder kundenspezifische Bildungsskript oder als Servermodul erhalten. Direkt außerhalb der Box unterstützt das Browser -Skript sowohl AMD als auch CommonJs. Wenn Sie also wünschen, können Sie fordertJs oder Browserify verwenden, ohne aus der Quelle erstellen zu müssen. Das Servermodul funktioniert auch mit Browserify vollkommen in Ordnung, aber es besteht die Möglichkeit, einen für Browser spezifischen Build zu verwenden, anstatt für einen Server bestimmt zu werden.
Link nicht direkt mit GitHub. Die Bibliothek soll nicht direkt aus der Quelle arbeiten, sondern das Gebäude. Wenn keine der vorverpackten Optionen für Sie funktioniert, beziehen Sie sich auf die Gebäudedokumentation.
Auf Mandel. Sie müssen den Optimierer verwenden, um dem Modul einen Namen zu geben. Zum Beispiel:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsEine vorgebaute Version von highlight.js mit vielen gemeinsamen Sprachen wird von mehreren beliebten CDNs gehostet. Wenn Sie Highlight.js über CDN verwenden, können Sie die SubResource -Integrität für zusätzliche Sicherheit verwenden. Einzelheiten siehe Digests.md.
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/dark.min.css " >
< script type =" module " >
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script src =" https://unpkg.com/@highlightjs/[email protected]/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://unpkg.com/@highlightjs/[email protected]/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://unpkg.com/@highlightjs/[email protected]/es/highlight.min.js' ;
// and it's easy to individually load & register additional languages
import go from 'https://unpkg.com/@highlightjs/[email protected]/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > Hinweis: Das CDN-veranstaltete highlight.min.js Paket bündelt nicht jede Sprache. Es wäre sehr groß. Auf unserer Download -Seite finden Sie unsere Liste der "gemeinsamen" Sprachen, die wir standardmäßig bündeln.
Sie können auch die gleichen Vermögenswerte, die wir über unsere eigenen CDNs servieren, herunterladen und sich selbst abgeben. Wir veröffentlichen diese Builds im CDN-Release-Github-Repository. Sie können einzelne Dateien einfach von den CDN -Endpunkten mit curl usw. abziehen. Wenn Sie sagen, Sie benötigen nur highlight.min.js und eine einzelne CSS -Datei.
Es gibt auch ein NPM-Paket @HighlightJS/CDN-Assets, wenn das Einziehen der Vermögenswerte über npm oder yarn für Ihren Build-Prozess einfacher wäre.
Auf der Download-Seite kann schnell ein benutzerdefiniertes Single-File-Minifik-Bundle generiert werden, einschließlich nur der gewünschten Sprachen.
Hinweis: Das Erstellen aus der Quelle kann etwas kleinere Builds erstellen als der Download der Website.
Unser NPM -Paket einschließlich aller unterstützten Sprachen kann mit NPM oder Garn installiert werden:
npm install highlight.js
# or
yarn add highlight.jsEs gibt auch ein weiteres NPM-Paket @HighlightJS/CDN-Assets, das vorgebaute CDN-Assets enthält, einschließlich ES6-Modulen, die im Browser importiert werden können:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsAlternativ können Sie das NPM -Paket aus der Quelle erstellen.
Der aktuelle Quellcode ist immer auf GitHub verfügbar.
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonWeitere Informationen finden Sie in unserer Gebäudedokumentation.
Highlight.js arbeitet an allen modernen Browsern und unterstützte derzeit Node.js -Versionen. Sie benötigen die folgende Software, um zur Kernbibliothek beizutragen:
Highlight.js wird unter der BSD -Lizenz veröffentlicht. Weitere Informationen finden Sie in unserer Lizenzdatei.
Die offizielle Website für die Bibliothek lautet https://highlightjs.org/.
Weitere eingehende Dokumentation für die API und andere Themen finden Sie unter http://highlightjs.readthedocs.io/.
Eine Liste des Kernteams und der Mitwirkenden finden Sie in der Datei der Mitwirkenden.md.
