テキスト領域でシンプルなJavascriptのハイライト表示ですか？

Question

私は2つのシンプルなテキストエリアを持っています。ここでは、書かれているJavaScriptコードを強調したいと思います。 ユーザーがテキスト領域に関数を入力するとすぐに、キーワードなどを別の色などで表示する必要があります。

私はこれをハックしようとしましたscript。しかし、私が望むものを得ることができませんでした。

Answer 1

のために便利ですdemo

です編集可能な単純なテキストエリアとして残ります。私はここで少し実験してきました：http://www.dcc.uchile.cl/~jmunoz/

をそれははるかに最適な、非常にバギーからだ、まだ...それは、任意のルールを使用してテキストを強調表示することができます。私はテキストの色を変更することを許可していた作業用のバージョンを持っていましたが、背景だけでなく、いくつか問題がありました。

基本的には、テキスト領域と全く同じ内容とフォントスタイルで、透明なフォントを使ってdivオーバーレイを追加することです。テキストは内部の、私はオーバーレイdivテキストを見せながらtextareaテキストを透明にすることを試みた別のフォントの色を可能にするなど

特別な背景、境界線を有することができ、特定の単語や語句を包むspanの要素を持っています。主な問題は、カーソルも透明になったことでした。

私はdivをeditablecontentと併用する方がはるかに良い選択肢と思われます。

Answer 2

Ace（demo）とCodeMirror（demo）を確認できます。

Textarea that can do syntax highlighting on the fly?とOnline Code Editorの質問もあなたに役立つと思います。

Answer 3

テキスト領域にマークアップを含めることはできないため、ハイライト表示することはできません。私がインラインスペルチェッカーのために使ったアプローチは、間違って綴られた単語のためにdivをオーバーレイすることでした。これは、テキストの中の単語のxとyの位置を得ることができたために可能でした。

しかし、テキストエリアをコンテンツ編集可能divにオーバーレイすると、スパンなどのコンテンツをラップしてスタイリングを適用することができます。

Answer 4

コンテンツ編集可能属性を持つdivタグまたはsectionタグを使用できると思います。このdivまたはセクションの内部では、ハイライト関数やvarsなどのマークアップを追加で使用できますが、この属性はhtml5属性のコンテンツを編集可能にする新しいブラウザでのみ機能します。ここでは、jsの簡単なhighligterが必要な場合は、この1 https://github.com/cloudhead/hijsかもしれすることはまだしながら、私はいつも、このようなコードのハイライトとして、追加の機能を持つtextarea要素を有するに興味を持っていましたあなたのタスク