javascript - vue - syntax error adjacent jsx elements must be wrapped in an enclosing tag




Textarea que pode fazer destaque de sintaxe on the fly? (6)

Eu estou armazenando um número de blocos de HTML dentro de um CMS por razões de manutenção mais fácil. Eles são representados por <textarea> s.

Alguém sabe um Widget JavaScript de algum tipo que pode fazer realce de sintaxe para HTML dentro de uma área de texto ou similar, mantendo um editor de texto simples (sem WYSIWYG ou funções avançadas)?


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

Primeiro, você pode dar uma olhada neste artigo:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors .

Para mais, aqui estão algumas ferramentas que parecem se adequar ao seu pedido:

  • EditArea - Demo como FileEditor que é uma extensão Yii - ( Licença de Software Apache, BSD, LGPL )

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

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

    O CodePress é um editor de código-fonte baseado na web com realce 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 MIT-style + suporte comercial opcional )

    O 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 foi escrito para o idioma que você está editando, o código será colorido e o editor irá, opcionalmente, ajudá-lo com o recuo

  • Ace - Demo - ( licença triplo do Mozilla (MPL / GPL / LGPL) )

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


Eu recomendaria EditArea para edição ao vivo de uma textarea de hightlighted de sintaxe.





Atualização: Bespin agora é o ACE, que é mencionado pela resposta mais bem classificada aqui. Use ACE em vez disso.

Tenho que ir com o Bespin da Mozilla. Ele é construído usando recursos HTML5 (por isso é rápido e rápido, mas não suporta navegadores legados), mas definitivamente incrível de usar e supera tudo que eu já vi - provavelmente porque ele é o Mozilla, e eles desenvolvem o Firefox então sim. .. Existe também um jQuery Plugin que contém uma extensão para facilitar o uso com o jQuery.





highlighting