如何制作HTML在线代码高亮_HTML在线代码高亮功能实现与语法着色方案

<!-- 引入CSS样式 -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />
<p><!-- 代码容器 -->
<pre><code class="html">
<div class="example" data-id="123">
<p>Hello World</p>
</div>
</code></pre></p><p><!-- 引入JS -->
<script src="<a href="https://www.php.cn/link/7269e7952aa48c4379151a29d01e25dd">https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js"></script&gt</a>;
<script src="<a href="https://www.php.cn/link/3ea0dca52330dfaa77e8a459cadd584c">https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markup.min.js"></script&gt</a>;

function highlightHTML(html) {
  return html
    .replace(/(<\/?)([a-zA-Z]+)([^>]*>)/g, '$1<span class="tag"$2</span>$3')
    .replace(/\b(id|class|style|data-.+?)\b/g, '<span class="attr-name"$1</span>')
    .replace(/("[^"]*")/g, '<span class="attr-value"$1</span>');
}

.tag { color: #219; }
.attr-name { color: #444; }
.attr-value { color: #d14; }