que tienen dos áreas de texto simples en qué quiero destacar el código Javascript siendo escrito. Tan pronto como el usuario escriba la función en el área de texto, las palabras clave, etc. tienen que mostrarse en diferentes colores más o menos.¿Destaca JavaScript simple en un área de texto?
me trataron de cortar este script. Pero no pude conseguir lo que quería.
Siempre he estado interesado en tener textarea elementos con funcionalidades adicionales, tales como código de destacar, sin dejar quedando como simples áreas de texto editables. He experimentado un poco aquí: http://www.dcc.uchile.cl/~jmunoz/
Está lejos de ser óptimo y bastante problemático, pero aún así ... Permite resaltar texto usando reglas arbitrarias. Solía tener una versión funcional que permitía cambiar el color del texto (y no solo el fondo), pero tenía algunos problemas.
Básicamente lo que hago es agregar una superposición div con exactamente el mismo contenido y estilo de fuente que el área de texto pero con fuentes transparentes. El texto interior tiene span elementos envolventes ciertas palabras y frases que pueden tener fondos especiales, bordes, etc.
para permitir diferentes colores de la fuente, he intentado hacer que el texto textarea transparente, al tiempo que muestra la superposición de texto div. El problema principal allí fue que el cursor se volvió transparente también.
Yo diría que usar un div con contenido editable parece una opción mucho mejor.
Puede marcar Ace (demo) y CodeMirror (demo).
Supongo que Textarea that can do syntax highlighting on the fly? y Online Code Editor preguntas serán útiles para usted también.
Debido a que un área de texto no puede contener texto, por lo que usted no puede poner de relieve per se. El enfoque que utilicé para un corrector ortográfico en línea fue superponer divs para palabras que se escribieron incorrectamente. Esto fue posible porque era posible obtener la ubicación xey de las palabras dentro del texto.
sin embargo, puede ser preferible para superponer el área de texto editable con un div contenido que permitiría que envuelva contenido en tramos etc y luego aplicar el estilo.
creo que se puede utilizar un div o etiqueta de sección con el contenido de los atributos editables. Dentro de esta división o sección, puede utilizar un marcado adicional para funciones de alto nivel, vars, etc. Pero este atributo solo funciona en navegadores nuevos que admiten el contenido de atributo html5 editable. Aquí es una demo
Si necesita un simple highligter js, puede ser éste https://github.com/cloudhead/hijs es muy útil para la tarea
Esto es exactamente lo que estaba buscando. jugaré con tu código por un tiempo. – Rahul
¿Todavía puedo obtener la recompensa? lol. Pero realmente, no confíes demasiado en ese código, era un programador mucho menos experimentado en aquel entonces. Puedes hacer lo que quieras con él, pero si yo fuera tú, solo lo usaría como referencia y lo construiría desde cero. –
espero que te den jajaja. Estoy creando desde cero, es solo que necesitaba un código básico simple para comenzar y crear una biblioteca adecuada para él :) – Rahul