如何为textarea编辑器中的XML标签实现语法高亮？

原始代码 #

<div class="box-body">
<div class="form-group">
<label class="control-label">
<?php echo trans('site_key'); ?></label>
<textarea name="create-xml-header" id="create-xml-header" rows="1" cols="100"> </textarea>
</div>          
</div>

问题 #

如何为该textarea编辑器中的XML标签实现语法高亮？

原生<textarea>不支持语法高亮功能，你需要借助第三方代码编辑库来实现，以下是两种实用方案：

方案一：使用CodeMirror（推荐，完整编辑增强） #

CodeMirror是专门针对代码编辑的JavaScript库，支持XML语法高亮、自动闭合标签、行号显示等功能，步骤如下：

1. 引入CodeMirror的CSS和JS资源
2. 基于原生textarea初始化CodeMirror实例，指定XML语言模式

示例代码：

<!-- 引入CodeMirror核心样式和主题（可选） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/monokai.min.css">

<!-- 引入CodeMirror核心JS和XML模式插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>

<div class="box-body">
  <div class="form-group">
    <label class="control-label">
      <?php echo trans('site_key'); ?>
    </label>
    <!-- 保留原有textarea，CodeMirror会自动替换它 -->
    <textarea name="create-xml-header" id="create-xml-header" rows="10" cols="100"></textarea>
  </div>          
</div>

<script>
  // 初始化CodeMirror编辑器
  const editor = CodeMirror.fromTextArea(document.getElementById('create-xml-header'), {
    mode: 'xml',          // 指定XML语法模式
    lineNumbers: true,    // 显示行号
    theme: 'monokai',     // 应用主题样式
    indentUnit: 2,        // 设置缩进单位为2空格
    autoCloseTags: true   // 自动闭合XML标签
  });

  // 表单提交时将编辑器内容同步回原textarea
  document.querySelector('form').addEventListener('submit', function() {
    editor.save();
  });
</script>

方案二：使用Prism.js（仅基础高亮，适合简单场景） #

如果只需要语法高亮效果，不需要复杂的编辑功能，可以用Prism.js配合可编辑的<pre>标签替代原生textarea：

1. 引入Prism的CSS和JS资源
2. 用可编辑的<pre>标签替换textarea，添加XML语言类
3. 监听内容变化，实时触发高亮更新

示例代码：

<!-- 引入Prism核心样式和JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-xml.min.js"></script>

<div class="box-body">
  <div class="form-group">
    <label class="control-label">
      <?php echo trans('site_key'); ?>
    </label>
    <!-- 可编辑的pre标签，用于XML高亮 -->
    <pre contenteditable="true" class="language-xml" id="create-xml-header"></pre>
    <!-- 添加隐藏input用于表单提交时传递内容 -->
    <input type="hidden" name="create-xml-header" id="xml-content">
  </div>          
</div>

<script>
  const editablePre = document.getElementById('create-xml-header');
  const hiddenInput = document.getElementById('xml-content');

  // 初始化高亮
  Prism.highlightElement(editablePre);

  // 监听内容变化，实时更新高亮和隐藏input的值
  editablePre.addEventListener('input', function() {
    Prism.highlightElement(this);
    hiddenInput.value = this.textContent;
  });
</script>

内容的提问来源于stack exchange，提问作者user20508390