highlight.js
v11.11.0 - Happy Holidays
Highlight.js est un surligneur de syntaxe écrit en javascript. Il fonctionne dans le navigateur ainsi que sur le serveur. Il peut fonctionner avec à peu près n'importe quel balisage, ne dépend pas d'autres cadres et a une détection automatique du langage.
Contenu
requireimport node.js ES6Comme toujours, les versions majeures contiennent des modifications de rupture qui peuvent nécessiter l'action des utilisateurs. Veuillez lire la version_11_upgrade.md pour un résumé détaillé des modifications de rupture et de toutes les actions que vous pourriez avoir besoin.
Veuillez consulter Security.MD pour les informations de support à long terme.
Le strict minimum pour utiliser highlight.js sur une page Web est un lien vers la bibliothèque avec l'un des thèmes et l'appel highlightAll :
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script > Cela trouvera et mettra en surbrillance le code à l'intérieur des balises <pre><code> ; Il essaie de détecter automatiquement la langue. Si la détection automatique ne fonctionne pas pour vous ou si vous préférez être explicite, vous pouvez spécifier la langue manuellement en utilisant l'attribut class :
< pre > < code class =" language-html " > ... </ code > </ pre > Pour appliquer le style highlight.js au texte clair sans le mettre en évidence, utilisez le langage plaintext :
< pre > < code class =" language-plaintext " > ... </ code > </ pre > Pour éviter complètement un bloc de code, utilisez la classe nohighlight :
< pre > < code class =" nohighlight " > ... </ code > </ pre >Le strict minimum pour détecter automatiquement la langue et mettre en surbrillance un code.
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . valuePour charger uniquement un sous-ensemble "commun" de langues populaires:
hljs = require ( 'highlight.js/lib/common' ) ; Pour mettre en surbrillance le code avec une langue spécifique, utilisez highlight :
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value Voir l'importation de la bibliothèque pour plus d'exemples d' require par rapport à l'utilisation import , etc. Pour plus d'informations sur l'objet de résultat renvoyé par highlight highlightAuto , reportez-vous aux documents API.
Highlight.js prend en charge plus de 180 langues dans la bibliothèque de base. Il existe également des définitions linguistiques tierces disponibles pour prendre en charge encore plus de langues. Vous pouvez trouver la liste complète des langues prises en charge dans supportd_languages.md.
Si vous avez besoin d'un peu plus de contrôle sur l'initialisation de Highlight.js, vous pouvez utiliser les fonctions highlightElement et configure . Cela vous permet de mieux contrôler ce qu'il faut mettre en évidence et quand .
Par exemple, voici l'équivalent approximatif d'appeler highlightAll mais faire le travail manuellement à la place:
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; Veuillez vous référer à la documentation des options configure .
Nous recommandons fortement <pre><code> Emballage pour les blocs de code. C'est assez sémantique et "JUST" OUT "avec zéro tripotage. Il est possible d'utiliser d'autres éléments HTML (ou combos), mais vous devrez peut-être accorder une attention particulière à la préservation des brise-ligne.
Disons que votre balisage pour les blocs de code utilise des divs:
< div class =' code ' > ... </ div >Pour mettre en évidence ces blocs manuellement:
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ; Sans utiliser une balise qui préserve les brise-ligne (comme pre ), vous aurez besoin de CSS supplémentaires pour les préserver. Vous pouvez également les ruptures de ligne pré et post-processus avec un plug-in, mais nous vous recommandons d'utiliser CSS .
Pour préserver les brise-ligne à l'intérieur d'une div en utilisant CSS:
div . code {
white-space : pre;
}Voir HighlightJS / VUE-PLUGIN pour un plugin VUE simple qui fonctionne très bien avec Highlight.js.
Un exemple de vue-plugin en action:
< 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 >Vous pouvez exécuter la mise en évidence à l'intérieur d'un travailleur Web pour éviter de geler la fenêtre du navigateur tout en traitant de très gros morceaux de code.
Dans votre script principal:
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;Dans wearch.js:
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; Tout d'abord, vous installerez probablement la bibliothèque via npm ou yarn - voir Obtenir la bibliothèque.
requireBesoin de la bibliothèque de niveau supérieur Chargera toutes les langues:
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valuePour une empreinte plus petite, chargez notre sous-ensemble commun de langues (le même ensemble utilisé pour notre version Web par défaut).
const hljs = require ( 'highlight.js/lib/common' ) ;Pour la plus petite empreinte, chargez uniquement les langues dont vous avez besoin:
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' } ) . valueimport node.js ES6L'importation par défaut enregistrera toutes les langues:
import hljs from 'highlight.js' ;Il est plus efficace d'importer uniquement la bibliothèque et d'enregistrer les langues dont vous avez besoin:
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Si votre outil de build traite CSS importe, vous pouvez également importer le thème directement en tant que module:
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ; Remarque: Pour l'instant, vous voudrez installer le package @highlightjs/cdn-assets au lieu de highlight.js . Voir Télécharger les actifs CDN prédéfinis
Pour importer la bibliothèque et enregistrer uniquement les langues dont vous avez besoin:
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 ) ;Pour importer la bibliothèque et enregistrer toutes les langues:
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;Remarque: Le chemin d'accès à ces fichiers variera en fonction de l'endroit où vous les avez installés / copiés dans votre projet ou votre site. Le chemin ci-dessus n'est qu'un exemple.
Vous pouvez également utiliser importmap pour importer de la même manière que le nœud:
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > Utilisez le code ci-dessus dans votre HTML. Après cela, votre javascript peut importer en utilisant la touche nommée depuis votre importmap , par exemple @highlightjs dans ce cas:
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;Remarque: Vous pouvez également importer directement à partir des URL entièrement statiques, comme nos propres ressources CDN du module ES6 pré-construites. Voir Fetch via CDN pour des exemples spécifiques.
Vous pouvez obtenir Highlight.js en tant que script de navigateur hébergé ou personnalisé ou en tant que module de serveur. Dès la sortie de la boîte, le script du navigateur prend en charge AMD et CommonJS, donc si vous souhaitez utiliser les obligations ou la navigation sans avoir à construire à partir de la source. Le module de serveur fonctionne également parfaitement bien avec Browserify, mais il y a l'option d'utiliser une génération spécifique aux navigateurs plutôt que quelque chose destiné à un serveur.
Ne liez pas directement vers GitHub directement. La bibliothèque n'est pas censée fonctionner directement à partir de la source, elle nécessite une construction. Si aucune des options préemballées ne fonctionne pour vous, référez-vous à la documentation du bâtiment.
Sur Amond. Vous devez utiliser l'optimiseur pour donner un nom au module. Par exemple:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsUne version prédéfinie de Highlight.js emballé avec de nombreuses langues communes est hébergée par plusieurs CDN populaires. Lorsque vous utilisez Highlight.js via CDN, vous pouvez utiliser l'intégrité de la sous-resource pour une sécurité supplémentaire. Pour plus de détails, voir 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 > Remarque: le package highlight.min.js hébergé par CDN ne regroupe pas chaque langue. Ce serait très grand. Vous pouvez trouver notre liste de langues "communes" que nous regroupons par défaut sur notre page de téléchargement.
Vous pouvez également télécharger et auto-héberger les mêmes actifs que nous servons via nos propres CDN. Nous publions ces builds dans le référentiel GitHub à libération CDN. Vous pouvez facilement retirer les fichiers individuels des points de terminaison CDN avec curl , etc.; Si vous disons que vous n'aviez besoin que highlight.min.js et d'un seul fichier CSS.
Il existe également un package NPM @ HighlightJS / CDN-Assets si tirer les actifs via npm ou yarn serait plus facile pour votre processus de construction.
La page de téléchargement peut générer rapidement un bundle minifié à un seul fichier personnalisé, y compris uniquement les langues que vous désirez.
Remarque: la construction de Source peut produire des builds légèrement plus petits que le téléchargement du site Web.
Notre package NPM, y compris toutes les langages pris en charge, peut être installé avec NPM ou YARN:
npm install highlight.js
# or
yarn add highlight.jsIl existe également un autre package NPM @ HighlightJS / CDN-Assets qui contient des actifs CDN pré-construits, y compris les modules ES6 qui peuvent être importés dans le navigateur:
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsAlternativement, vous pouvez créer le package NPM à partir de Source.
Le code source actuel est toujours disponible sur GitHub.
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :commonVoir notre documentation de construction pour plus d'informations.
Highlight.js fonctionne sur tous les navigateurs modernes et les versions Node.js actuellement prises en charge. Vous aurez besoin du logiciel suivant pour contribuer à la bibliothèque de base:
Highlight.js est publié sous la licence BSD. Voir notre fichier de licence pour plus de détails.
Le site officiel de la bibliothèque est https://highlightjs.org/.
Une autre documentation approfondie pour l'API et d'autres sujets se trouvent à http://highlightjs.readthedocs.io/.
Une liste de l'équipe de base et des contributeurs peut être trouvée dans le fichier contributeurs.md.
