Zone de texte qui peut faire la coloration syntaxique à la volée?

Je stocke un certain nombre de blocs HTML dans un CMS pour des raisons de facilité de maintenance. Ils sont représentés par l' <textarea>art.

Quelqu'un connaît-il un widget JavaScript d'une certaine sorte qui peut faire la mise en évidence de la syntaxe pour HTML dans un textareaou similaire, tout en restant un éditeur de texte brut (pas de WYSIWYG ou de fonctions avancées)?

Il n'est pas possible d'atteindre le niveau de contrôle requis sur la présentation dans une zone de texte standard.

Si vous êtes d'accord avec cela, essayez CodeMirror ou Ace (anciennement skywriter et bespin ) , ou Monaco (utilisé dans MS VSCode).

Du fil en double - un lien wikipedia obligatoire: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Voici la réponse que j'ai faite à une question similaire ( éditeur de code en ligne ) sur les programmeurs :

Tout d'abord, vous pouvez consulter 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 en tant que FileEditor qui est une extension Yii - ( Apache Software License, BSD, LGPL )

  Voici EditArea, un éditeur javascript gratuit pour le code source. Il permet d'écrire du code source bien formaté avec numérotation des lignes, prise en charge des onglets, recherche et remplacement (avec regexp) et mise en évidence de la syntaxe en direct (personnalisable).

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

  CodePress est un éditeur de code source basé sur le Web avec une coloration syntaxique écrite en JavaScript qui colore le texte en temps réel pendant sa saisie dans le navigateur.

• CodeMirror - L'une des nombreuses démos - ( licence de style MIT + support commercial en option )

  CodeMirror est une bibliothèque JavaScript qui peut être utilisée pour créer une interface d'édition 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 Editor - Demo - ( Mozilla tri-licence (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 des é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 de Cloud9 IDE et 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 zone de texte en surbrillance syntaxique.

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

Je dois y aller avec Bespin de Mozilla. Il est construit à l'aide de fonctionnalités HTML5 (il est donc rapide et rapide, mais ne prend pas en charge les navigateurs hérités), mais il est vraiment incroyable à utiliser et bat tout ce que j'ai rencontré - probablement parce que c'est Mozilla qui le soutient, et ils développent Firefox alors oui. .. Il existe également un plugin jQuery qui contient une extension pour le rendre un peu plus facile à utiliser avec jQuery.

Vous pouvez mettre en surbrillance du texte dans un <textarea>, en utilisant un <div>soigneusement placé derrière lui.

consultez Mettre en surbrillance le texte dans une zone de texte .

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

Il existe également 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 zones de texte? 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/