Code de mise en surbrillance de la syntaxe avec Javascript

StackOverflow utilise la bibliothèque Prettify .

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

L'objectif principal de la conception était de rendre la bibliothèque de base très petite et de la rendre très simple pour les développeurs.

Voir http://rainbowco.de .

SyntaxHighlighter est disponible en tant que projet GitHub .

JQuery Syntax Highlighter est une nouvelle base basée sur Google Prettify – un marqueur de syntaxe javascript simple vraiment très populaire.

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

Qu'en est-il du Prisme de Lea Verou?

De l'annonce de son blog en juin (2012):

• C'est minuscule. Le noyau est seulement 1.5KB minifié et gzip.
• C'est incroyablement extensible. Non seulement il est facile d'ajouter de nouvelles langues (c'est une donnée avec chaque surligne de syntaxe ces jours-ci), mais aussi d'étendre celles existantes.
• Il soutient le parallélisme à travers les travailleurs du Web, pour une meilleure performance dans certains cas.
• Il ne vous force pas à utiliser un marquage spécifique à Prism, même pas un nom de classe spécifique à Prism, uniquement un balisage standard que vous devriez utiliser de toute façon. Donc, vous pouvez l'essayer pendant un certain temps, enlevez-le si vous ne l'aimez pas et ne vous laissez aucune traces.

Si vous utilisez jQuery, il y a Chilli:

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

Tout ce que vous devez faire est d'inclure les jquery-chili.js et recipes.js, et faites le point fort avec

 $("code").chili(); 

Il devrait comprendre la langue elle-même.

Que diriez-vous:

Syntaxhighlighter

Highlight.js

JSHighlighter

Je suis très heureux avec SHJS . Il prend en charge un grand nombre 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 mise en évidence de la syntaxe de Coda . Envoyez-moi un courriel si vous souhaitez l'utiliser.

JQuery.Syntax est un surligneur de syntaxe extrêmement rapide et léger. Il comporte un chargement dynamique de fichiers sources de syntaxe et intègre proprement des CSS ou des modèles.

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

Si vous recherchez la mise en surbrillance de syntaxe dans un éditeur dans le navigateur, essayez CodeMirror .

Je ne suis pas argumentatif, mais je pensais qu'il valait la peine de mentionner que si vous utilisez un CMS ou une plate-forme de blog, utiliser un surligneur est mieux pour des raisons évidentes – Regardez 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 backend – donc il n'y a pas besoin des surligneurs JS. (La seule fonctionnalité qu'ils ajoutent est la possibilité d'imprimer / copier [en utilisant swf].)

SyntaxHighlighter

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