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

Implement HTML syntax highlighting into a textarea for writing code

本文关键字：显示 代码 语法 区域 文本 实现 HTML      更新时间：2023-09-26

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

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

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

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

单击此处查看演示：代码镜像 HTML 编辑器演示

点击这里下载代码镜像：代码镜像主页/下载

用户手册

：代码镜像用户手册

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

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

<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()});
相关文章：