Textarea that can do syntax highlighting on the fly?

Question

I am storing a number of HTML blocks inside a CMS for reasons of easier maintenance. They are represented by TEXTAREAs.

Does anybody know a JavaScript Widget of some sort that can do syntax highlighting for HTML within a Textarea or similar, while still staying a plain text editor (no WYSIWYG or advanced functions)?

Answer 1

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 2

It's not possible to achieve the required level of control over presentation in a regular textarea.

If you're OK with that, see CodeMirror or maybe even bespin

From the duplicate thread - an obligatory wikipedia link: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Answer 3

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 4

I am looking for something for typing in php/html "formatters" in textareas in drupal (a CMS) administration forms. CodeMirror with the php-html-css code parser looks like what I am looking for. Ymacs looks pretty good, too, but, based on the demos, CodeMirror looks better-suited to editing relatively short pieces of php/html while remaining in a web-form.

In response to, "Why are you representing them as textareas?": Well, yes, the form textarea could be hidden when js is available. I think Ymacs does that. I know there are some js wysiwyg editors that hide the textarea that the user is editing.

How do you use SyntaxHighlighter for making the user's life easier when editing code in a web client? All the examples I see only use SyntaxHighlighter to highlight code which is already on the server. Why would you want to burden every visitor with downloading the library and slowly executing a task which could have been done once and cached by the server?

Answer 5

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

http://www.cdolivet.com/index.php?page=editArea

Answer 6

Here is a an actual syntax highlighting in a textarea. http://ufku.com/drupal/bueditor/contributions/html-syntax-highlighter

Answer 7

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.