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

Question

我有两个简单的textareas，我想突出显示正在编写的javascript代码。 一旦用户在文本区域中键入功能，关键字等必须以不同的颜色显示。

我试图破解这个script。但是无法得到我想要的东西。

Answer 1

您可以查看Ace（demo）和CodeMirror（demo）。

我认为Textarea that can do syntax highlighting on the fly?和Online Code Editor问题对您也有用。

Answer 2

我认为你可以使用带有内容可编辑属性的div或section标签。在这个div或部分中，您可以为higlight函数，变量等使用额外的标记。但是此属性仅适用于支持html5属性内容可编辑的新浏览器。这是demo

如果你需要一个简单的js highligter，可能这个https://github.com/cloudhead/hijs对你的任务很有用

Answer 3

我一直对textarea元素添加功能（如代码突出显示）感兴趣，同时仍然保持简单的可编辑textareas。我在这里进行了一些实验：http://www.dcc.uchile.cl/~jmunoz/

它远非最佳和非常错误，但仍然......它允许使用任意规则进行文本突出显示。我曾经有一个工作版本允许更改文本颜色（而不仅仅是背景），但它有一些问题。

基本上我所做的是添加div叠加层，其内容和字体样式与文本区域完全相同，但使用透明字体。里面的文字包含span元素，包含某些可能有特殊背景，边框等的单词和短语。

为了允许不同的字体颜色，我尝试将textarea文字透明，同时显示重叠div文字。主要问题是光标也变得透明。

我会说使用带有editablecontent的div似乎是一个更好的选择。

Answer 4

由于文本区域不能包含标记，因此您无法突出显示本身。我用于内联拼写检查程序的方法是为拼写错误的单词重叠div。这是可能的，因为可以在文本中获取单词的x和y位置。

然而，最好将textarea与内容可编辑的div重叠，这样可以将内容包装在spans等中，然后应用样式。