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 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 va rechercher et mettre en évidence le code à l'intérieur des <pre><code>balises ; 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' classattribut :

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

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

Pour désactiver complètement la surbrillance, 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 évidence et quand .

Voici une manière équivalente d'appeler à l' initHighlightingOnLoadaide 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>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 les autres options, reportez-vous à la documentation de configure.

Travailleurs Web

Vous pouvez exécuter la surbrillance dans un agent 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é 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 le souhaitez, vous pouvez utiliser RequireJS ou Browserify sans avoir à le faire. build à partir de la source. 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 vous connectez pas directement à GitHub. La bibliothèque n'est pas censée fonctionner directement à partir de la source, elle doit être construite. Si aucune des options pré-packagées ne fonctionne pour vous, reportez-vous à la documentation de construction .

Le package hébergé sur CDN n'a 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.

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 .