Área de texto que pode destacar a sintaxe em tempo real?

Estou armazenando vários blocos HTML dentro de um CMS por motivos de manutenção mais fácil. Eles são representados por <textarea>s.

Alguém conhece algum widget JavaScript de algum tipo que possa destacar a sintaxe do HTML em um textareaou similar, enquanto ainda permanece um editor de texto sem formatação (sem WYSIWYG ou funções avançadas)?

Não é possível atingir o nível de controle necessário sobre a apresentação em uma área de texto regular.

Se você está OK com isso, tentar CodeMirror ou Ace (anteriormente skywriter e bespin ) , ou Monaco (usado em MS VSCode).

No thread duplicado - um link obrigatório da wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Aqui está a resposta que eu fiz a uma pergunta semelhante ( Online Code Editor ) sobre programadores :

Primeiro, você pode dar uma olhada neste artigo:
Wikipedia - Comparação de editores de código-fonte baseados em JavaScript .

Para mais, aqui estão algumas ferramentas que parecem se encaixar com sua solicitação:

• EditArea - Demonstração como FileEditor que é uma extensão Yii - ( Apache Software License, BSD, LGPL )

  Aqui está o EditArea, um editor de javascript gratuito para o código-fonte. Permite escrever código fonte bem formatado com numeração de linhas, suporte a guias, pesquisa e substituição (com regexp) e realce de sintaxe ao vivo (personalizável).

• CodePress - Demo do Joomla! CodePress Plugin - ( LGPL ) - Ele não funciona no Chrome e parece que o desenvolvimento cessou.

  O CodePress é um editor de código-fonte baseado na Web, com destaque de sintaxe escrito em JavaScript que colore o texto em tempo real enquanto ele está sendo digitado no navegador.

• CodeMirror - Uma das muitas demonstrações - ( licença no estilo MIT + suporte comercial opcional )

  CodeMirror é uma biblioteca JavaScript que pode ser usada para criar uma interface de editor relativamente agradável para conteúdo semelhante a código - programas de computador, marcação HTML e similares. Se um modo tiver sido escrito para o idioma que você está editando, o código será colorido e, opcionalmente, o editor o ajudará na indentação

• Ace Ajax.org Cloud9 Editor - Demo - ( licença tripla da Mozilla (MPL / GPL / LGPL) )

  Ace é um editor de código independente escrito em JavaScript. Nosso objetivo é criar um editor de código baseado na Web que corresponda e amplie os recursos, a usabilidade e o desempenho dos editores nativos existentes, como TextMate, Vim ou Eclipse. Ele pode ser facilmente incorporado em qualquer página da Web e aplicativo JavaScript. Ace foi desenvolvido como o editor principal do Cloud9 IDE e o sucessor do projeto Mozilla Skywriter (Bespin).

O CodePress faz isso, assim como o EditArea . Ambos são de código aberto.

Eu recomendaria o EditArea para edição ao vivo de uma área de texto com destaque em sintaxe.

Atualizar: Bespin agora é ACE, que é mencionado pela resposta mais bem avaliada aqui. Use o ACE.

Tenho que ir com o Bespin da Mozilla. Ele foi criado usando os recursos HTML5 (por isso é rápido e rápido, mas não suporta navegadores herdados), mas definitivamente incrível de usar e supera tudo o que eu já vi - provavelmente porque é o Mozilla fazendo o backup e eles desenvolvem o Firefox. .. Há também um plug-in jQuery que contém uma extensão para torná-lo um pouco mais fácil de usar com o jQuery.

Você pode destacar o texto em um <textarea>, usando um <div>cuidadosamente colocado atrás dele.

confira Realçar texto dentro de uma área de texto .

O único editor que conheço que possui destaque de sintaxe e um fallback para uma área de texto é o Mozilla Bespin . Pesquise no Google a incorporação do Bespin para ver como incorporar o editor. O único site que conheço que usa isso agora é a Mozilla Jetpack Gallery muito alfa (na página de envio de uma Jetpack) e você pode querer ver como eles a incluem.

Há também uma postagem no blog sobre a incorporação e reutilização do editor Bespin que pode ajudá-lo.

Por que você os está representando como áreas de texto? Esse é meu favorito:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Mas se você estiver usando um CMS, provavelmente haverá um plugin melhor. Por exemplo, o wordpress tem uma versão evoluída:

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