Textarea可以动态进行语法高亮显示吗？

Question

我在CMS中存储了许多HTML块，以便于维护。它们由<textarea>s代表。

有没有人知道某种类型的JavaScript Widget可以在textarea或类似的内容中对HTML进行语法高亮显示，同时仍然保持纯文本编辑器（没有WYSIWYG或高级函数）？

Answer 1

在常规文本区域中无法实现对演示文稿的所需控制级别。

如果你对此感到满意，可以试试CodeMirror或Ace（以前的skywriter和bespin），或Monaco（用于MS VSCode）。

从重复的线程 - 必须的维基百科链接：http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Answer 2

这是qazxsw poi上的qazxsw poi（qazxsw poi）：

首先，您可以查看这篇文章： the response I've done to a similar question。

更多信息，以下是一些似乎符合您要求的工具：

• Online Code Editor - programmers是Wikipedia ― Comparison of JavaScript-based source code editors - （Apache软件许可证，BSD，LGPL） 这是EditArea，一个源代码的免费javascript编辑器。它允许编写格式良好的源代码，包括行编辑，选项卡支持，搜索和替换（使用regexp）和实时语法突出显示（可自定义）。
• EditArea - Demo as FileEditor - （LGPL） - 它在Chrome中不起作用，看起来开发已经停止。 CodePress是基于Web的源代码编辑器，具有用JavaScript编写的语法突出显示，可以在浏览器中输入文本时实时为文本着色。
• Yii Extension - CodePress - （Demo of Joomla! CodePress Plugin license + optional CodeMirror） CodeMirror是一个JavaScript库，可用于为类似代码的内容创建一个相对令人愉快的编辑器界面 - 计算机程序，HTML标记等。如果已为您正在编辑的语言编写了一种模式，则代码将被着色，编辑器将选择帮助您缩进
• One of the many demo - MIT-style - （Mozilla tri-license（MPL / GPL / LGPL）） Ace是一个用JavaScript编写的独立代码编辑器。我们的目标是创建一个基于Web的代码编辑器，该编辑器匹配并扩展现有本机编辑器（如TextMate，Vim或Eclipse）的功能，可用性和性能。它可以轻松嵌入任何网页和JavaScript应用程序中。 Ace是commercial support的主要编辑，也是Mozilla Skywriter（Bespin）项目的继承者。

Answer 3

Ace Ajax.org Cloud9 Editor和Demo一样。两者都是开源的。

Answer 4

我建议使用Cloud9 IDE进行语法高亮显示文本区域的实时编辑。

Answer 5

更新：Bespin现在是ACE，这里提到了最高级别的答案。请改用ACE。

得与Mozilla一起去CodePress。它是使用HTML5功能构建的（所以它快速而快速，但不支持传统浏览器），但使用和击败我遇到的所有东西绝对令人惊讶 - 可能是因为它是Mozilla支持它，他们开发Firefox所以是的。 ..还有一个EditArea使它更容易使用jQuery。

Answer 6

我所知道的唯一一个编辑器具有语法高亮功能，而对textarea的回退是EditArea。谷歌围绕嵌入Bespin看看如何嵌入编辑器。我所知道的唯一现在使用此网站的是alpha Bespin（在提交Jetpack页面中），您可能想看看它们是如何包含它的。

还有一个可以帮助你的jQuery Plugin which contains a extension for it。

Answer 7

你为什么把它们当作textareas？这是我最喜欢的：

Mozilla Bespin

但是如果你使用的是CMS，可能会有更好的插件。例如，wordpress有一个进化版本：

Mozilla Jetpack Gallery

Answer 8

您可以使用在其后面小心放置的blog post on embedding and reusing the Bespin editor突出显示http://alexgorbatchev.com/wiki/SyntaxHighlighter中的文本。

看看http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/。