Module communautaire génial

Highlight.js

Statut 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 un lien vers la bibliothèque avec l'un des styles et l'appel à 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 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 classe . Les classes peuvent également être préfixées par language- ou lang- .

Pour désactiver nohighlight surbrillance 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. Cela vous permet de contrôler ce qu'il faut mettre en évidence et quand .

Voici une façon é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 d'autres options, reportez-vous à la documentation de configure .

Travailleurs Web

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:

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 serveur. Dès la sortie de la boîte, le script de navigateur prend en charge à la fois AMD et CommonJS. build à partir de la source. Le module serveur fonctionne également parfaitement avec Browserify, mais il est possible d'utiliser une build 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 pas lier directement à 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é-packagées ne fonctionne pour vous, reportez-vous à la documentation de la construction .

Le package hébergé par CDN n'a pas toutes les langues. Sinon, il serait trop gros. Si vous ne voyez pas la langue dont vous avez besoin dans la section "Commun" , il peut être ajouté 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 distribué sous 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 à http://highlightjs.readthedocs.io/ .

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