Code de coloration syntaxique avec Javascript [fermé]

109

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).

javascript html syntax syntax-highlighting mlambie
la source
shjs.sourceforge.net
Firoz Khan

Réponses:

103

StackOverflow utilise la bibliothèque Prettify .

AaronSieb
la source
J'appuie cela. Google Code l'utilise pour sa propre mise en évidence de repo (depuis qu'ils l'ont écrit) et détecte automatiquement la langue.
Karan
Sûrement utiliser celui qui détecte "automatiquement" la langue met simplement plus de poids sur la machine / navigateur du client ...
James
2
Vous pouvez donner la langue à Prettify si vous la connaissez, cela améliorera les performances. Ceci n'est tout simplement pas utilisé dans StackOverflow en raison du large public linguistique.
Vincent Robert
Je viens de l'ajouter à mon site Web, et c'est génial et si simple à utiliser!
Lawrence Dol
@Vincent: ça améliore plus que juste les performances ;-)
SamB
44

J'ai récemment développé un arc-en-ciel.

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

Voir http://rainbowco.de .

Craig
la source
2
Je viens de croiser Rainbow aujourd'hui - il me semble qu'il peut discriminer plus finement que Prettify (comme par exemple, pouvoir dire quand rdf:typeest utilisé comme élément et quand c'est un attribut).
Roger_S
3
Cela doit aller jusqu'au sommet, Craig. J'ai essayé toutes les autres solutions et seul Rainbow a géré correctement Python et avait des feuilles de style de thème lisibles . Plugin incroyable!
Blender
15

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

Il prend en charge des éléments tels que codeet des preblocs, capable d'utiliser des noms de classe comme language-javascriptpour indiquer que nous voulons qu'il soit mis en évidence, ainsi que le wordwrap. 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-shou en spécifiant des options lors de l'initialisation. Un excellent choix stable qui est mis à jour régulièrement.

balupton
la source
L'auteur dit en fait qu'il est basé sur Prettify de Google, pas sur SyntaxHighlighter. Cela ressemble à SyntaxHighlighter 3, mais semble exiger beaucoup moins de travail pour sa configuration. Merci pour le lien!
Tieson T.
15

Qu'en est-il de Prism de Lea Verou.

D' après l' annonce de son article de blog en juin (2012):

  • C'est minuscule. Le noyau n'est que de 1,5 Ko minifié et gzippé.
  • C'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 celles 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, seulement un balisage standard que vous devriez utiliser de toute façon. Donc, vous pouvez simplement l'essayer pendant un moment, le supprimer si vous ne l'aimez pas et ne laissez aucune trace.
Ilya Touvschev
la source
Cela a fini par être la meilleure option de toutes les réponses pour moi en raison de la facilité d'ajouter de nouvelles définitions de langue.
Mike Grace
5

Que diriez-vous:

syntaxe surligneur

highlight.js

JSHighlighter

Chris Pietschmann
la source
21
Une simple recherche sur Google me donnerait également cette liste - mais laquelle vous préférez et pourquoi?
viam0Zah
5

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 le jquery-chili.js et les recettes.js, et de faire le surlignage avec 

$("code").chili();

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

Edu Felipe
la source
Les liens vers des exemples sur cette page mènent tous à un domaine expiré plein d'annonces, il est donc un peu difficile de se faire une idée de ce à quoi ressemble ce surligneur.
Nathan Osman
5

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 la coloration syntaxique de Coda . Envoyez-moi un e-mail si vous souhaitez l'utiliser.

Andrew Hedges
la source
4

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 en utilisant CSS ou modelines.

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

ioquatix
la source
Malheureusement, il pensait qu'un message FpML standard était du SPAM :)
ehosca
@ehosca, pouvez-vous me donner des précisions sur le problème que vous rencontrez?
ioquatix
quand je colle le xml dans goo.gl/PPcDx à goo.gl/qSqm9, il dit Contenu non valide, semble être du spam. J'espère que cela t'aides.
ehosca le
Vous devez inclure des sauts de ligne dans le texte, sinon cela ressemble à du spam de lien. Je ne me souviens pas des formules exactes que j'ai utilisées, mais je pense que si vous avez plus d'une URL par ligne, le texte est considéré comme du spam - c'est parce que des tas de robots spammaient le système ( syntax-highlighing.com ).
ioquatix
3

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

rplevy
la source
3

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

James
la source
2
Ce n'est pas évident pour moi. Pourquoi est-il préférable d'utiliser un surligneur backend?
Evan P.
1
Ouais, moi aussi je le ferais vraiment savoir ce qui est "évident" dans le fait de préférer envoyer une réponse plus large au client ...
ZenMaster
1
Je préfère que la coloration syntaxique soit toujours présente sur les appareils sur lesquels JS n'est pas activé. De plus, les surligneurs côté client ont des coûts d'exécution qui peuvent être assez élevés si vous avez beaucoup de code à mettre en évidence. Cela dit, cela dépend de votre cas d'utilisation spécifique :)
James
Quels appareils n'ont pas JS activé?
Jack Giffin