使用JavaScript在我的html网站上的textarea中突出显示xml代码

Question

我正在构建一个包含textarea的网站，它显示一段XML代码并允许用户对其进行编辑。它会像下面：

<textarea> 
    <person> 
    <name>AAA</name> 
    <position>Manager</position> 
    <age>40</age> 
    </person> 
    <person> 
    <name>BBB</name> 
    <position>CEO</position> 
    <age>50</age> 
    </person> 
</textarea> 

所以基本上，用户将看到与下面的XML代码的文本框，他可以编辑：

<person> 
    <name>AAA</name> 
    <position>Manager</position> 
    <age>40</age> 
    </person> 
    <person> 
    <name>BBB</name> 
    <position>CEO</position> 
    <age>50</age> 
    </person> 

当然，默认情况下它们会显示为纯黑色文本。我的目标是

1）突出显示XML标记（与什么StackOverflow上显示），因此，它更容易为用户读取XML内容

2）当用户编辑XML内容，内容是再次动态突出显示

是否有任何JavaScript已准备就绪，并会帮助我做到这一点？

非常感谢！

Answer 1

有一些很好的JavaScript库，突出显示代码在HTML页面。例如，您有highlightjs。

在你的情况，你可以这样做：

<link rel="stylesheet" 
 
     href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"> 
 
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script> 
 
<pre><code class="xml"> 
 
    <person> 
 
    <name>AAA</name> 
 
    <position>Manager</position> 
 
    <age>40</age> 
 
    </person> 
 
    <person> 
 
    <name>BBB</name> 
 
    <position>CEO</position> 
 
    <age>50</age> 
 
    </person> 
 
</code></pre>

而你也有你的代码高亮为XML。但这在textarea中不起作用。

您可能需要构建自己的程序，以便用户可以编辑代码。喜欢的东西：

1. 您创建一个可编辑的代码框（强调通过上述库）
2. 用户点击框编辑其内容。
3. 用户编辑代码。
4. 用户验证更改。
5. 您再次突出显示您的框（在更改​​上）。

---

希望有所帮助。