Área de texto que puede resaltar la sintaxis sobre la marcha?

Estoy almacenando varios bloques HTML dentro de un CMS por razones de mantenimiento más fácil. Están representados por el <textarea>s.

¿Alguien conoce un widget de JavaScript de algún tipo que pueda resaltar la sintaxis para HTML dentro de un textareao similar, sin dejar de ser un editor de texto sin formato (sin WYSIWYG o funciones avanzadas)?

No es posible lograr el nivel de control requerido sobre la presentación en un área de texto normal.

Si estás bien con eso, tratar CodeMirror o As (anteriormente Skywriter y bespin ) , o Mónaco (utilizado en MS VSCode).

Del hilo duplicado: un enlace obligatorio de wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Aquí está la respuesta que hice a una pregunta similar ( Editor de código en línea ) sobre programadores :

Primero, puede echar un vistazo a este artículo:
Wikipedia - Comparación de editores de código fuente basados ​​en JavaScript .

Para obtener más información, aquí hay algunas herramientas que parecen ajustarse a su solicitud:

• EditArea - Demo como FileEditor que es una extensión Yii - ( Licencia de software Apache, BSD, LGPL )

  Aquí está EditArea, un editor de JavaScript gratuito para el código fuente. Permite escribir código fuente bien formateado con numeración de línea, soporte de pestañas, búsqueda y reemplazo (con regexp) y resaltado de sintaxis en vivo (personalizable).

• CodePress - Demo de Joomla! CodePress Plugin - ( LGPL ) - No funciona en Chrome y parece que el desarrollo ha cesado.

  CodePress es un editor de código fuente basado en la web con resaltado de sintaxis escrito en JavaScript que colorea el texto en tiempo real mientras se escribe en el navegador.

• CodeMirror - Una de las muchas demostraciones - ( licencia de estilo MIT + soporte comercial opcional )

  CodeMirror es una biblioteca de JavaScript que se puede usar para crear una interfaz de editor relativamente agradable para contenido similar a código: programas de computadora, marcado HTML y similares. Si se ha escrito un modo para el idioma que está editando, el código se coloreará y el editor opcionalmente lo ayudará con la sangría

• Ace Ajax.org Cloud9 Editor - Demo - ( Mozilla tri-license (MPL / GPL / LGPL) )

  Ace es un editor de código independiente escrito en JavaScript. Nuestro objetivo es crear un editor de código basado en la web que coincida y amplíe las características, la usabilidad y el rendimiento de los editores nativos existentes, como TextMate, Vim o Eclipse. Se puede incrustar fácilmente en cualquier página web y aplicación de JavaScript. Ace se desarrolla como el editor principal de Cloud9 IDE y el sucesor del Proyecto Mozilla Skywriter (Bespin).

CodePress hace esto, al igual que EditArea . Ambos son de código abierto.

Recomendaría EditArea para la edición en vivo de un área de texto resaltado de sintaxis.

Actualización: Bespin ahora es ACE, que se menciona aquí por la respuesta mejor calificada. Use ACE en su lugar.

Tengo que ir con Bespin por Mozilla. Está construido con funciones HTML5 (por lo que es rápido y rápido, pero no es compatible con los navegadores heredados), pero definitivamente es increíble de usar y supera todo lo que he encontrado, probablemente porque Mozilla lo respalda y desarrollan Firefox, así que sí. .. También hay un complemento jQuery que contiene una extensión para que sea ​​un poco más fácil de usar con jQuery.

Puede resaltar el texto en un <textarea>, utilizando un <div>cuidadosamente colocado detrás de él.

echa un vistazo a Highlight Text Inside a Textarea .

El único editor que conozco que tiene resaltado de sintaxis y una alternativa a un área de texto es Mozilla Bespin . Google alrededor para incrustar Bespin para ver cómo incrustar el editor. El único sitio que conozco que usa esto en este momento es la muy alfa Galería Mozilla Jetpack (en la página de envío de Jetpack) y es posible que desee ver cómo la incluyen.

También hay una publicación de blog sobre incrustación y reutilización del editor Bespin que puede ayudarlo.

¿Por qué los estás representando como áreas de texto? Este es mi favorito:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Pero si está utilizando un CMS, probablemente haya un mejor complemento. Por ejemplo, WordPress tiene una versión evolucionada:

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