在文本区域中突出显示简单的Javascript？

Question

我有两个简单的textareas，我想突出显示正在编写的JavaScript代码。 只要用户在文本区域输入函数，关键字等就必须以不同的颜色显示。

我试图破解此script。但无法得到我想要的。

Answer 1

一个https://github.com/cloudhead/hijs是有用的我一直希望拥有textarea元素添加了功能，如代码高亮，同时还保持为简单的可编辑文本区域。我在这里进行了一些尝试：http://www.dcc.uchile.cl/~jmunoz/

它远不是最优的，而且很麻烦，但仍然...它允许使用任意规则突出显示文本。我曾经有一个工作版本，允许改变文本颜色（而不仅仅是背景），但它有一些问题。

基本上我所做的是添加一个div叠加层，其文本区域的内容和字体样式与透明字体完全相同。里面的文字具有span元件包裹特定词语和短语可具有特殊的背景，边框等

为了允许不同的字体颜色，我试图使所述textarea文本透明的，而示出了覆盖div文本。那里的主要问题是光标也变得透明。

我会说使用带editablecontent的div看起来是一个更好的选择。

Answer 2

您可以检查Ace（demo）和CodeMirror（demo）。我想Textarea that can do syntax highlighting on the fly?和Online Code Editor问题也会对你有用。

Answer 3

由于文本区域不能包含标记，因此不能高亮显示本身。我用于内联拼写检查器的方法是将拼写错误的单词覆盖div。这是可能的，因为可以在文本中获取单词的x和y位置。

但是，最好将textarea覆盖一个内容可编辑的div，这将允许您将内容包裹在span中，然后应用样式。

Answer 4

我认为你可以使用带有content editable属性的div或section标签。在这个div或者section里面，你可以为higlight函数，变量等使用额外的标记。但是这个属性只能在支持html5属性内容的新浏览器中编辑。这里是一个demo

如果你需要一个简单的JS highligter，可能这对你的任务