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

【问题标题】：Simple Javascript highlighting in a text area?在文本区域中突出显示简单的 Javascript？
【发布时间】：2012-05-08 01:12:45
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

这正是我想要的。我会玩一会儿你的代码。
我还能拿到赏金吗？哈哈。但实际上，不要太相信那些代码，那时我是一个经验不足的程序员。你可以用它做任何你想做的事情，但如果我是你，我只会将它用作参考并从头开始构建它。
我希望你能得到大声笑。我是从头开始创建的，只是我需要一些简单的基本代码来开始并为它创建一个合适的库:)