Highlight.js

Highlight.js est un surligneur de syntaxe écrit en JavaScript. Il fonctionne aussi bien dans le navigateur que sur le serveur. Il fonctionne avec à peu près n'importe quel balisage, ne dépend d'aucun framework et dispose d'une détection automatique du langage.

Commencer

Le strict minimum pour utiliser highlight.js sur une page Web est de créer un lien vers la bibliothèque avec l'un des styles et d'appeler 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>

Cela trouvera et mettra en évidence le code à l'intérieur des <pre><code>balises ; il essaiera de détecter la langue automatiquement. Si la détection automatique ne fonctionne pas pour vous, vous pouvez spécifier la langue dans l' classattribut :

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

La liste des classes de langue prises en charge est disponible dans la référence des classes . Les classes peuvent également être préfixées par language-ou lang-.

Pour désactiver complètement la mise en évidence, utilisez la nohighlightclasse :

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

Initialisation personnalisée

Lorsque vous avez besoin d'un peu plus de contrôle sur l'initialisation de highlight.js, vous pouvez utiliser les fonctions highlightBlocket configure . Cela vous permet de contrôler quoi mettre en surbrillance et quand .

Voici une manière équivalente d'appeler initHighlightingOnLoadavec jQuery :

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

Vous pouvez utiliser n'importe quelle balise au lieu <pre><code>de baliser votre code. Si vous n'utilisez pas de conteneur qui préserve les sauts de ligne, vous devrez configurer highlight.js pour utiliser la <br>balise :

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

Pour d'autres options, reportez-vous à la documentation de configure.

Travailleurs du Web

Vous pouvez exécuter la mise en surbrillance dans un Web Worker pour éviter de geler la fenêtre du navigateur tout en traitant de très gros morceaux de code.

Dans votre script principal :

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);
})

Dans travailleur.js :

1
2
3
4
5
onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}

Obtenir la bibliothèque

Vous pouvez obtenir highlight.js en tant que script de navigateur hébergé ou personnalisé ou en tant que module serveur. Dès la sortie de la boîte, le script de navigateur prend en charge à la fois AMD et CommonJS, donc si vous le souhaitez, vous pouvez utiliser RequireJS ou Browserify sans avoir à le faire. construire à partir des sources. Le module serveur fonctionne également parfaitement avec Browserify, mais il existe la possibilité d'utiliser une version spécifique aux navigateurs plutôt que quelque chose destiné à un serveur. Rendez-vous sur la page de téléchargement pour toutes les options.

Ne créez pas de lien direct vers GitHub. 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, reportez-vous à la documentation de construction .

Le package hébergé sur CDN ne contient pas toutes les langues. Sinon, il serait trop volumineux. Si vous ne voyez pas la langue dont vous avez besoin dans la section "Commun" , elle peut être ajoutée manuellement :

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

Sur Almond. Vous devez utiliser l'optimiseur pour donner un nom au module. Par exemple :

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Licence

Highlight.js est publié sous la licence BSD. Voir le fichier LICENSE pour plus de détails.

Liens

Le site officiel de la bibliothèque est à https://highlightjs.org/ .

Une documentation plus approfondie sur l'API et d'autres sujets se trouve sur http://highlightjs.readthedocs.io/ .

Les auteurs et contributeurs sont répertoriés dans le fichier AUTHORS.en.txt .