我所知道的唯一具有语法高亮显示和回退到文本区域的编辑器是Mozilla Bespin。谷歌来嵌入Bespin，以了解如何嵌入编辑器。目前我所知道的唯一使用这个功能的网站是alpha Mozilla Jetpack Gallery(在提交Jetpack页面中)，你可能想看看他们是如何包含它的。

还有一篇关于嵌入和重用Bespin编辑器的博文可能会对您有所帮助。

你可以突出显示<textarea>中的文本，使用一个<div>小心地放在它后面。

检查突出文本在文本区域。

在常规的文本区域中，不可能实现对表示的所需级别的控制。

如果你觉得没问题，试试CodeMirror或Ace或Monaco(在MS VSCode中使用)。

来自重复的线程-一个强制性的维基百科链接:基于javascript的源代码编辑器的比较

更新:Bespin现在是ACE，这里评分最高的答案提到了它。使用ACE代替。

我得选Mozilla的Bespin。它是用HTML5的特性构建的(所以它又快又快，但不支持传统浏览器)，但使用起来绝对令人惊叹，打败了我遇到的所有东西——可能是因为它是Mozilla支持的，他们开发了Firefox，所以是的……还有一个jQuery插件，它包含一个扩展，使它更容易使用jQuery。

总之，以下是我们可以选择的:

Highlight.js Prism.js & Microlight.js 谷歌prettyprint Pygments.org Hilite.me Microlight.js 否则，你可以尝试一个轻量级的定制- https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

为了节省您的时间和精力，最好在这些范围内进一步调查。

CodePress做到了这一点，EditArea也是如此。两者都是开源的。