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

Question

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

我试图破解这个脚本。但无法得到我想要的。

Answer 1

您可以查看Ace ( demo ) 和CodeMirror ( demo )。

我想Textarea 可以即时进行语法高亮显示？和在线代码编辑器问题也会对您有用。

Answer 2

我认为您可以使用具有内容可编辑属性的 div 或 section 标签。在此 div 或部分中，您可以为高亮函数、变量等使用附加标记。但此属性仅适用于支持 html5 属性内容可编辑的新浏览器。这是一个演示

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

Answer 3

我一直对具有textarea附加功能（例如代码突出显示）的元素感兴趣，同时仍然保留为简单的可编辑文本区域。我在这里做了一些实验：http ://www.dcc.uchile.cl/~jmunoz/

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

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

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

我会说使用div带有可编辑内容的 a 似乎是一个更好的选择。

Answer 4

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

但是，最好使用内容可编辑的 div 覆盖 textarea，这将允许您将内容包装在跨度等中，然后应用样式。