web-dev-qa-db-fra.com

Syntaxe surlignant le code avec Javascript

Quelles bibliothèques Javascript pouvez-vous recommander pour la coloration syntaxique des blocs <code> en HTML?

(Une suggestion par réponse s'il vous plaît).

106
mlambie

StackOverflow utilise la bibliothèque Prettify .

103
AaronSieb

J'en ai récemment développé un appelé Rainbow.

L'objectif principal de la conception était de rendre la bibliothèque principale très petite et de la rendre très facile à étendre pour les développeurs.

Voir http://rainbowco.de .

45
Craig

SyntaxHighlighter est disponible sous la forme projet GitHub .

26
mlambie

Qu'en est-il Prisme par Lea Verou.

De sa part article de blog annonce en juin (2012):

  • C'est minuscule. Le noyau est seulement 1,5 Ko minimisé et compressé.
  • Il est incroyablement extensible. Non seulement il est facile d'ajouter de nouvelles langues (c'est une donnée avec chaque surligneur de syntaxe de nos jours), mais aussi d'étendre les langues existantes.
  • Il prend en charge le parallélisme via Web Workers, pour de meilleures performances dans certains cas.
  • Cela ne vous oblige pas à utiliser un balisage spécifique à Prism, pas même un nom de classe spécifique à Prism, seul le balisage standard que vous devriez utiliser de toute façon. Donc, vous pouvez l'essayer pendant un moment, le supprimer si vous ne l'aimez pas et ne laisser aucune trace.
15
Ilya Tuvschev

jQuery Syntax Highlighter est un nouveau basé sur Google's Prettify - un surligneur de syntaxe javascript simple vraiment vraiment très populaire.

Il prend en charge des éléments tels que les blocs code et pre, capables d'utiliser des noms de classe comme language-javascript pour indiquer que nous voulons le mettre en surbrillance, ainsi que le retour à la ligne. Vous pouvez copier et coller du code en le sélectionnant normalement au lieu d'avoir à ouvrir une vue brute comme beaucoup d'autres. Il peut être davantage personnalisé en utilisant l'attribut de données HTML5 data-sh ou via la spécification des options à l'initialisation. Un grand choix stable qui est mis à jour régulièrement.

15
balupton

Si vous utilisez jQuery, il y a Chilli:

http://code.google.com/p/jquery-chili-js/

Tout ce que vous avez à faire est d'inclure les jquery-chili.js et recipes.js, et de faire le point culminant avec

$("code").chili();

Il devrait comprendre la langue par lui-même.

5
Edu Felipe

Je suis très content de SHJS . Il prend en charge une multitude de langues et semble assez rapide et précis.

Voici un exemple où je l'utilise sur mon blog. J'utilise mon propre fichier CSS personnalisé qui simule Coda's la mise en évidence de la syntaxe. Envoyez-moi un e-mail si vous souhaitez l'utiliser.

5
Andrew Hedges
5

jQuery.Syntax est un surligneur de syntaxe extrêmement rapide et léger. Il a un chargement dynamique des fichiers source de syntaxe et s'intègre proprement à l'aide de CSS ou de modelines.

Il a été développé spécifiquement pour combler une lacune - c'est-à-dire: un analyseur de syntaxe rapide, propre et côté client.

4
ioquatix

Si vous recherchez la coloration syntaxique dans un éditeur intégré au navigateur, essayez CodeMirror .

3
rplevy

Je ne suis pas en train de discuter, mais j'ai juste pensé qu'il valait la peine de mentionner que si vous utilisez un CMS ou une plateforme de blog, alors utiliser un surligneur backend est mieux pour des raisons évidentes - Jetez un œil à Geshi ( http://qbnz.com/highlighter/ ) si cela vous intéresse. En fait, vous pouvez configurer votre serveur pour analyser le contenu HTML via une technologie de backend - il n'y a donc pas besoin du tout de surligneurs JS. (La seule fonctionnalité qu'ils ajoutent est la possibilité d'imprimer/copier [en utilisant swf].)

3
James
2
Franci Penov

Cet article au Web Resources Depot répertorie un tas d'options pour mettre en évidence le code, dont certaines utilisent Javascript. Il a été publié le 4 mai 2009.

2
mlambie