使用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/cdn-release@9.12.0/build/styles/default.min.css"> 
 
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/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. 您再次突出顯示您的框（在更改​​上）。

---

希望有所幫助。