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

Question

Estoy almacenando varios bloques HTML dentro de un CMS para facilitar el mantenimiento.Están representados por <textarea>s.

¿Alguien conoce algún widget de JavaScript de algún tipo que pueda resaltar la sintaxis de HTML dentro de un textarea ¿O similar, sin dejar de ser un editor de texto plano (sin WYSIWYG ni funciones avanzadas)?

Answer 1

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

Si está de acuerdo con eso, intente CodeMirror o Ace (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

Answer 2

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

Primero, puedes 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:

• Editar área ― Demostración como editor de archivos quién es un Extensión Yii ― (Licencia de software Apache, BSD, LGPL)

  Aquí está EditArea, un editor javascript gratuito para código fuente.Permite escribir código fuente bien formateado con numeración de líneas, compatibilidad con pestañas, búsqueda y reemplazo (con expresiones regulares) y resaltado de sintaxis en vivo (personalizable).

• CódigoPrensa ― Demostración de Joomla!Complemento CodePress ― (LGPL) ― No funciona en Chrome y parece que el desarrollo ha cesado.

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

• Código espejo ― Una de las muchas demostraciones. ― (estilo MIT licencia + opcional soporte comercial)

  CodeMirror es una biblioteca de JavaScript que se puede utilizar para crear una interfaz de edición 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ás editando, el código se coloreará y, opcionalmente, el editor te ayudará con la sangría.

• Editor Ace Ajax.org Cloud9 ― Manifestación ― (Trilicencia de Mozilla (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 web que combine y amplíe las características, usabilidad y rendimiento de los editores nativos existentes como TextMate, Vim o Eclipse.Se puede integrar fácilmente en cualquier página web y aplicación JavaScript.Ace se desarrolla como el editor principal de IDE de Cloud9 y el sucesor del proyecto Mozilla Skywriter (Bespin).

Answer 3

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

Answer 4

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

Answer 5

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

Tengo que ir con Bespin de 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 jQuery Plugin que contiene una extensión para él para que sea un poco más fácil de usar con jQuery.

Answer 6

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 alfa Galería Mozilla Jetpack (en el envíe una página 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 de Bespin editor que puede ayudarte.

Answer 7

¿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/

Answer 8

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

consulte Resalte texto dentro de un área de texto .