その場で構文の強調表示を行うことができるTextarea？

メンテナンスを容易にするために、CMS内に多数のHTMLブロックを格納しています。彼らはによって表されます<textarea> sでます。

textareaプレーンテキストエディター（WYSIWYGや高度な機能はありません）のままで、HTMLの構文を強調表示できるJavaScriptウィジェットを知っている人はいますか？

通常のテキストエリアでの表示に対して必要なレベルの制御を達成することは不可能です。

それでよければ、CodeMirrorまたはAce （以前のスカイライターとベスピン）、またはモナコを試してください。（MS VSCodeで使用。

複製スレッドから-必須のウィキペディアリンク：http : //en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

これは、プログラマーに対する同様の質問（オンラインコードエディター）に対して私が行った応答です。

まず、この記事を
ご覧ください：ウィキペディア-JavaScriptベースのソースコードエディターの比較。

詳細については、ここにあなたの要求に合うと思われるいくつかのツールがあります：

• EditArea ― Yii拡張機能であるFileEditorとしてデモ ―（Apacheソフトウェアライセンス、BSD、LGPL）

  EditAreaは、ソースコード用の無料のJavaScriptエディターです。これは、行の回転、タブのサポート、検索と置換（正規表現を使用）、およびライブ構文の強調表示（カスタマイズ可能）を使用して、適切にフォーマットされたソースコードを記述できます。

• CodePress ― Joomla！のデモ CodePressプラグイン ―（LGPL）― Chromeでは動作せず、開発が中止されたようです。

  CodePressは、JavaScriptで記述された構文強調表示を備えたWebベースのソースコードエディターで、ブラウザーに入力されている間、リアルタイムでテキストに色を付けます。

• CodeMirror ― 多くのデモの1つ ―（MITスタイルのライセンス+オプション商用サポート）

  CodeMirrorはJavaScriptライブラリで、コードのようなコンテンツ（コンピュータープログラム、HTMLマークアップなど）に対して比較的快適なエディターインターフェイスを作成するために使用できます。編集している言語用にモードが記述されている場合、コードは色分けされ、エディターはオプションでインデントを支援します

• Ace Ajax.org Cloud9 Editor ― デモ ―（ Mozillaトライライセンス（MPL / GPL / LGPL））

  エースはJavaScriptで書かれたスタンドアロンコードエディターです。私たちの目標は、TextMate、Vim、またはEclipseなどの既存のネイティブエディターの機能、使いやすさ、およびパフォーマンスに一致して拡張するWebベースのコードエディターを作成することです。任意のWebページおよびJavaScriptアプリケーションに簡単に埋め込むことができます。AceはCloud9 IDEの主要なエディターであり、Mozilla Skywriter（Bespin）Projectの後継として開発されました。

CodePressはEditAreaと同様にこれを行います。どちらもオープンソースです。

構文が強調表示されたテキストエリアのライブ編集にはEditAreaをお勧めします。

更新： BespinがACEになりました。これは、ここで最も高い評価の回答で言及されています。代わりにACEを使用してください。

お奨めは、一緒に行くベスピン Mozillaが。これはHTML5機能を使用して構築されているため（高速で高速ですが、レガシーブラウザをサポートしていません）、使用するのは間違いなく驚くべきことであり、私が遭遇したすべてを打ち負かしています-おそらくMozillaがサポートしているためです。 .. jQueryで少し使いやすくするための拡張機能を含むjQueryプラグインもあります。

注意深く配置されたを使用して、のテキストを強調表示できます。<textarea><div>

テキストエリア内のハイライトテキストをチェックしてください。

私が知っている唯一のエディターは構文の強調表示とtextareaへのフォールバックで、Mozilla Bespinです。エディターを埋め込む方法を確認するためにベスピンを埋め込むためのグーグル。今これを使用していると知っている唯一のサイトは、まさにアルファ版のMozilla Jetpack Galleryです。（の送信ページにあります）です。

ありますベスピンエディタ埋め込み、再利用のブログの記事、あなたを助けるかもしれません。

なぜそれらをテキストエリアとして表すのですか？これは私のお気に入りです：

http://alexgorbatchev.com/wiki/SyntaxHighlighter

しかし、CMSを使用している場合は、おそらくより優れたプラグインがあります。たとえば、ワードプレスは進化したバージョンを持っています：

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