ハイライトJavaScriptを使用したHTML WebサイトのtextareaでのXMLコード

Question

私は、XMLコードの塊を表示し、ユーザーが編集できるテキストエリアを持つウェブサイトを構築しています。彼らは、無地の黒として表示されます。もちろん、

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

をデフォルトで：だから、基本的にユーザーは自分が編集することができ、以下の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> 

：それは以下のようになりますテキスト。私の目標は、

1）のStackOverflowを示したものと同じXMLタグ（）ユーザがXMLコンテンツを編集し、XMLコンテンツ

2）を読み取るすることは簡単だように、コンテンツがあると強調するためであります動的に再び強調表示

JavaScriptはありますか？これを行うのに役立つ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として強調しています。しかし、これはテキストエリアでは機能しません。

ユーザーがコードを編集できるように、独自のプログラムをビルドする必要があります。ような何か：あなたは、編集可能なコードボックスを作成

1. （は、上記ライブラリによってを強調表示）
2. ユーザーがその内容を編集するボックスをクリックします。
3. ユーザーがコードを編集します。
4. ユーザーは変更を検証します。
5. ボックスを再度強調表示します（変更時）。

---

お役に立てば幸いです。