javascript - テキスト領域での単純なJavascriptの強調表示？

Question

書かれているjavascriptコードを強調したい2つの単純なテキストエリアがあります。ユーザーがテキスト領域に機能を入力するとすぐに、キーワードなどを別の色などで表示する必要があります。

このスクリプトをハックしようとしました。しかし、私が欲しいものを手に入れることができませんでした。

Answer 1

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

構文の強調表示をその場で実行できるTextareaだと思いますか？オンラインコードエディタの質問も役に立ちます。

Answer 2

私は常にtextarea、単純な編集可能なテキストエリアのままでありながら、コードの強調表示などの機能が追加された要素を持つことに興味を持っていました。ここで少し実験してみました: http://www.dcc.uchile.cl/~jmunoz/

最適とは言えず、かなりバグがありますが、それでも... 任意のルールを使用してテキストを強調表示できます。以前は、テキストの色 (背景だけでなく) を変更できる作業バージョンがありましたが、いくつかの問題がありました。

基本的にdiv、テキスト領域とまったく同じ内容とフォント スタイルのオーバーレイを追加しますが、透明なフォントを使用します。内部のテキストにはspan、特定の単語やフレーズをラップする要素があり、特別な背景や境界線などを持つ場合があります。

さまざまなフォントの色を使用できるようにするためにtextarea、オーバーレイ テキストを表示しながらテキストを透明にしてみましたdiv。主な問題は、カーソルも透明になったことです。

editablecontentで a を使用するdivと、はるかに優れたオプションのように思えます。

Answer 3

I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo

If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task

Answer 4

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

ただし、コンテンツを編集可能な div でテキストエリアにオーバーレイすることをお勧めします。これにより、コンテンツをスパンなどでラップし、スタイリングを適用できます。