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

使用Prism.js等高亮库可快速实现HTML代码着色，通过引入CSS和JS文件，为pre>code添加language-html类即可自动着色；推荐方案支持丰富语言与主题，如Light、Dark、Solarized，兼顾可读性与美观，配合CDN加载与基本配置，几分钟内完成集成。

要在网页中实现HTML在线代码高亮功能，核心是将代码文本以可视化方式展示，并对不同的语法元素（如标签、属性、字符串等）应用颜色和样式。这个功能常见于技术博客、文档站点或代码编辑器中。以下是实现这一功能的实用方法与推荐的语法着色方案。

使用现成的高亮库（推荐方式）

最简单高效的方式是使用成熟的JavaScript代码高亮库，它们已经内置了丰富的语言解析规则和主题样式。

• Highlight.js：轻量、易用，支持超过180种语言，包括HTML、CSS、JavaScript等。只需引入CDN链接并调用初始化函数即可自动识别并着色代码块。
• Prism.js：模块化设计，可按需选择语言和插件（如行号、复制按钮），主题丰富，适合定制化需求。
• CodeMirror / Monaco Editor：如果需要可编辑的实时高亮编辑器，这两个库更合适，但体积较大，适用于复杂场景。

以 Prism.js 为例，基本用法如下：

<!-- 引入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="https://www.php.cn/faq/<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="https://www.php.cn/faq/<a href="https://www.php.cn/link/3ea0dca52330dfaa77e8a459cadd584c">https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markup.min.js"></script&gt</a>;

页面加载后，Prism会自动为 language-html 的代码块添加语法着色。

立即学习“前端免费学习笔记（深入）”；

自定义语法着色逻辑（进阶）

如果你希望完全掌控高亮过程，可以手动解析HTML代码并包裹span标签进行着色。这通常涉及正则表达式匹配和DOM操作。

• 使用正则识别开始标签：<[a-zA-Z][^>]*>
• 匹配属性名：如 \b(id|class|data-.+?)\b，用不同颜色标出
• 字符串值：用 "[^"]*" 或 '[^']*' 匹配并着色
• 注释：匹配 <!--.*?--> 并设为灰色斜体

示例片段：

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>');
}

然后配合CSS定义颜色：

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

注意：手动实现容易遗漏边缘情况，仅建议在特殊需求下使用。

选择合适的着色主题

良好的视觉体验依赖于清晰的配色方案。常见的主题有：

• Light（如GitHub）：白底黑字，适合白天阅读
• Dark（如Monokai、Dracula）：深色背景减少眼睛疲劳，程序员常用
• Solarized：专为色彩平衡设计，护眼且美观

大多数高亮库都提供多种主题CSS文件，可通过更换link路径切换。

基本上就这些。使用像 Prism.js 或 Highlight.js 这样的工具，几分钟内就能让网页中的HTML代码清晰可读。不复杂但容易忽略的是细节处理，比如保留空格、换行和防止XSS注入——记得对用户输入做适当转义。