Module communautaire génial

Highlight.js

État de la construction

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 de la langue.

Commencer

Le strict minimum pour utiliser highlight.js sur une page Web est de initHighlightingOnLoad 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 balises <pre><code> ; il essaie de détecter la langue automatiquement. Si la détection automatique ne fonctionne pas pour vous, vous pouvez spécifier la langue dans l'attribut de class :

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

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

Pour désactiver nohighlight mise nohighlight évidence nohighlight utilisez la classe nohighlight :

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 le highlightBlock et configure fonctions, ce qui vous permet de contrôler ce qu'il faut mettre en évidence et quand .

Voici une manière équivalente d'appeler initHighlightingOnLoad aide de 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 de <pre><code> pour baliser votre code. Si vous n'utilisez pas de conteneur qui conserve les sauts de ligne, vous devrez configurer highlight.js pour utiliser la balise <br> :

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

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

Travailleurs Web

Vous pouvez exécuter la mise en surbrillance dans 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:

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

Obtenir la bibliothèque

Vous pouvez obtenir highlight.js en tant que script de navigateur hébergé, de construction personnalisée ou en tant que module serveur. Dès sa sortie de la boîte, le script de navigateur prend en charge AMD et CommonJS, donc si vous le souhaitez, vous pouvez utiliser RequireJS ou Browserify sans avoir à 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ée à un serveur. Rendez-vous sur la page de téléchargement pour toutes les options.

Ne liez pas directement à GitHub. La bibliothèque n'est pas censée fonctionner directement à partir de la source, elle doit être compilée. Si aucune des options pré-packagé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" , vous pouvez l'ajouter 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 LICENCE pour plus de détails.

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

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

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