Textarea qui peut faire la coloration syntaxique à la volée?

Ici la réponse que j'ai faite à une question similaire (en Ligne de l'Éditeur de Code) sur programmeurs:

Tout d'abord, vous pouvez jeter un oeil à cet article:
Wikipedia-comparaison des éditeurs de code source basés sur JavaScript .

Pour en savoir plus, voici quelques outils qui semblent correspondre à votre demande:

• EditArea ― démo comme FileEditor qui est une Extension Yii ― (licence de logiciel Apache, BSD, LGPL )

  Voici EditArea, un éditeur javascript gratuit pour le code source. Il permet d'écrire du code source bien formaté avec la numérotation de ligne, Le support des onglets, la recherche et le remplacement (avec regexp) et la coloration syntaxique en direct (personnalisable).

• CodePress ― Démo de Joomla! Greffon CodePress ― (LGPL) - cela ne fonctionne pas dans Chrome et il semble que le développement ait cessé.

  CodePress est basé sur le web éditeur de code source avec coloration syntaxique écrit en JavaScript qui colore le texte en temps réel pendant qu'il est tapé dans le navigateur.

• CodeMirror ― l'Un des nombreux démo ― (MIT-style licence + en option support commercial)

  CodeMirror est une bibliothèque JavaScript qui peut être utilisée pour créer une interface d'éditeur relativement agréable pour le contenu de type code-programmes informatiques, balisage HTML, et similaires. Si un mode a été écrit pour la langue que vous modifiez, le code sera coloré, et l'éditeur vous aidera éventuellement avec l'indentation

• Ace Ajax.org Cloud9 Éditeur ― Démo ― (Mozilla tri-license (MPL/GPL/LGPL))

  Ace est un éditeur de code autonome écrit en JavaScript. Notre objectif est de créer un éditeur de code basé sur le web qui correspond et étend les fonctionnalités, la convivialité et les performances de éditeurs natifs existants tels que TextMate, Vim ou Eclipse. Il peut être facilement intégré dans n'importe quelle page web et application JavaScript. Ace est développé en tant qu'éditeur principal pour Cloud9 IDE et le successeur du projet Mozilla Skywriter (Bespin).

CodePress fait cela, tout comme EditArea. Les deux sont open source.

Je recommanderais EditArea pour l'édition en direct d'une syntaxe hightlighted textarea.

Mise à jour: Bespin est maintenant ACE, ce qui est mentionné par la réponse la mieux notée ici. Utilisez ACE à la place.

Je dois aller avec Bespin par Mozilla. Il est construit en utilisant des fonctionnalités HTML5 (donc c'est rapide et rapide, mais ne supporte pas les navigateurs hérités), mais certainement incroyable à utiliser et bat tout ce que j'ai rencontré - probablement parce que C'est Mozilla qui le sauvegarde, et ils développent Firefox donc oui... Il y a aussi un Plugin jQuery qui contient une extension pour pour le rendre un peu plus facile à utiliser avec jQuery.

Le seul éditeur que je connaisse qui a la coloration syntaxique et un repli vers une zone de texte est Mozilla Bespin . Google autour de l'intégration Bespin pour voir comment intégrer l'éditeur. Le seul site que je connais qui utilise ceci en ce moment est le très alpha Mozilla Jetpack Gallery (dans la page Soumettre un Jetpack) et vous voudrez peut-être voir comment ils l'incluent.

Il y a aussi un article de blog sur l'intégration et la réutilisation de L'éditeur Bespin qui peut vous aider.

Pourquoi les représentez-vous en tant que textareas? C'est mon préféré:

Http://alexgorbatchev.com/wiki/SyntaxHighlighter

Mais si vous utilisez un CMS, il y a probablement un meilleur plugin. Par exemple, wordpress a une version évoluée:

Http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

Vous pouvezMettre en surbrillance texte dans un <textarea>, en utilisant un <div> soigneusement placé derrière.

Consultez Mettez en surbrillance le texte à l'intérieur D'une zone de texte.