在文本区域中实现 HTML 语法突出显示以用于编写代码

Question

我有一个看似简单的问题，但我担心它太复杂，仅我一个人无法实现。我正在尝试在网页中实现一个文本区域，用户可以在其中编写 html 代码，按下按钮，解释后的 html 页面会显示在代码旁边的 div 中。与 w3schools 的“尝试一下”部分非常相似。

到目前为止，我已经实现了所有内容，并且它几乎按预期工作，当您按下按钮时，代码会在正确的位置正确呈现。下一步是在文本区域中实现语法突出显示，以便根据键入的标签或属性重新着色文本。基本上，我希望其行为与编写 html 代码时 notepad++ 的行为完全相同。文本变为蓝色，attribute="" 文本变为红色，等等。

我的想法是，我需要以某种方式逐字读取文本区域中的内容，测试所有可能的标签和属性名称，并用彩色文本重新填充文本区域。据我所知，我认为这对于传统的文本区域是不可能的，我可能必须实现一个专门的小程序来代替文本区域。有谁知道实现这一目标最痛苦的方法是什么？我是一名计算机科学专业的学生，​​即将完成我的学位，但我对 Web 编程的知识非常有限，而且我才开始深入研究 jquery 和 jsp，尽管我在 HTML/CSS/Javascript 方面拥有丰富的经验。

Answer 1

我过去也有类似的要求。我发现了一个很棒的基于 Javascript 的代码编辑器，您可以将其嵌入到您的 Web 应用程序中。

点击此处查看演示：Code Mirror HTML 编辑器演示

点击此处下载Code Mirror：Code Mirror home/download

用户手册：Code Mirror 用户手册

编辑器支持语法高亮、自动缩进、智能自动建议等。

使用它就像导入脚本一样简单：

<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">

并用代码镜像编辑器替换文本区域：

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

如果你使用 JQuery，你可以这样做：

var myCodeMirror = CodeMirror(function(elt) {
    $('#my-code-input').replaceWith(elt);
}, {value: $('#my-code-input').val()});