Textarea que pode fazer realce de sintaxe em tempo real?

Question

Eu sou armazenar 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 uma JavaScript Widget de uma espécie que pode fazer realce de sintaxe para HTML dentro de um textarea ou similar, enquanto ainda ficar um editor de texto simples (sem WYSIWYG ou funções avançadas)?

Answer 1

Não é possível alcançar o nível exigido de controle sobre a apresentação em uma área de texto regular.

Se você está bem com isso, tente CodeMirror ou Ace (anteriormente skywriter e bespin ) , ou Mónaco (usado em MS VSCode).

A partir do segmento duplicado - uma ligação wikipedia obrigatória: http://en.wikipedia.org / wiki / Comparison_of_JavaScript-based_source_code_editors

Answer 2

Aqui está a resposta que eu fiz para um pergunta semelhante (Online editor de código ) em programadores :

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

.

Para mais, é aqui algumas ferramentas que parecem se encaixar com o seu pedido:

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

  Aqui está EditArea, um editor de javascript livre para código-fonte. Ele permite escrever código fonte bem formatado com numérotation linha, suporte a abas, pesquisa e substituir (com regexp) e sintaxe ao vivo destacando (personalizável).

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

  CodePress é editor de código fonte baseado na web com destaque de sintaxe escrito em JavaScript que texto das cores em tempo real, enquanto ele está sendo digitado no navegador.

• CodeMirror - Um dos muitos demonstração - ( MIT licença de estilo + opcional suporte comercial )

  CodeMirror é uma biblioteca JavaScript que pode ser usado para criar uma interface relativamente agradável editor de conteúdo de código-like - programas de computador, HTML marcação, e similar. Se um modo foi escrito para a linguagem que você está editando, o código vai ser colorido, e o editor irá opcionalmente ajudá-lo com recuo

• Ace Ajax.org Cloud9 editor - Demonstração - ( Mozilla tri-licença (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 partidas e estende as características, usabilidade e performance de editores nativas existentes, como TextMate, Vim ou Eclipse. Ele pode ser facilmente incorporado em qualquer página web e aplicação JavaScript. Ace é desenvolvido como o editor principal para Cloud9 IDE e o sucessor do Mozilla Skywriter (Bespin) do projeto.

Answer 3

CodePress faz isso, assim como editArea . Ambos são open source.

Answer 4

I would recommend EditArea for live editing of a syntax hightlighted textarea.

Answer 5

Update: Bespin is now ACE, which is mentioned by the highest rated answer here. Use ACE instead.

Gotta go with Bespin by Mozilla. It's built using HTML5 features (so it's quick and fast, but doesn't support legacy browsers though), but definitely amazing to use and beats everything I've come across - probably beacause it's Mozilla backing it, and they develop Firefox so yeah... There's also a jQuery Plugin which contains a extension for it to make it a bit easier to use with jQuery.

Answer 6

The only editor I know of that has syntax highlighting and a fallback to a textarea is Mozilla Bespin. Google around for embedding Bespin to see how to embed the editor. The only site I know of that uses this right now is the very alpha Mozilla Jetpack Gallery (in the submit a Jetpack page) and you may want to see how they include it.

There's also a blog post on embedding and reusing the Bespin editor that may help you.

Answer 7

Why are you representing them as textareas? This is my favorite:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

But if you are using a CMS, there's probably a better plugin. For example, wordpress has an evolved version:

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

Answer 8

You can Highlight text in a <textarea>, using a <div> carefully placed behind it.

check out Highlight Text Inside a Textarea.