需用嵌套保留格式并转义字符，再通过Prism.js或highlight.js引入样式与脚本实现语法高亮，或用纯CSS手动包裹关键词模拟高亮。
如果您希望在HTML5页面中插入带有代码的文档并实现语法高亮效果，则需借助原生语义化标签与外部样式或脚本协同完成。以下是实现该目标的具体操作步骤：
一、使用与<code>标签嵌入代码块</code>
HTML5推荐使用
（预格式化文本）包裹<code>（计算机代码）来保留缩进、换行及特殊字符，这是语义最清晰、兼容性最强的基础方式。该方法无需依赖JavaScript，适合静态展示。<p>1、在HTML文件的</p>内插入<pre class="brush:php;toolbar:false;"><code>结构，例如：<pre class="brush:php;toolbar:false;"><code class="html"><p>Hello & World</p></code>。
2、将原始代码中的小于号替换为>，与号&替换为&，确保浏览器不将其解析为HTML标签。
3、为元素添加class属性（如class="html"），便于后续通过CSS或高亮库识别语言类型。
二、引入Prism.js实现自动语法高亮
Prism.js是一个轻量级、可扩展的语法高亮库，支持多种编程语言，并提供主题样式。它通过分析标签的class属性自动匹配语言并渲染颜色标记。
1、在HTML文件
中引入Prism.js核心CSS文件：npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />。2、在
底部引入Prism.js核心JS文件：<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>。3、按需加载对应语言插件，例如高亮JavaScript需额外引入：<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-<a%20style=" color: text-decoration:underline title="javascript" href="https://m.php.cn/zt/15724.html" target="_blank">javascript.min.js"></script>。
三、使用highlight.js手动触发高亮
highlight.js提供更灵活的初始化控制，适用于需要动态插入代码块或延迟渲染的场景。它不依赖class前缀，可通过显式调用hljs.highlightElement()对单个元素处理。
1、在
中引入highlight.js默认CSS：ajax/libs/highlight.js/11.9.0/styles/default.min.css">。2、在
末尾引入highlight.js主库：<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>。3、添加初始化脚本，在DOM加载完成后遍历所有元素：<script>hljs.highlightAll();</script>。
四、纯CSS方案实现基础高亮（无JavaScript）
对于极简需求或严格禁用脚本的环境，可利用CSS属性选择器与伪元素模拟基础高亮效果，仅适用于固定结构、少量语言的静态代码片段。
1、为不同语言定义独立class，如、。
2、编写CSS规则匹配关键字，例如：code.html-code span.tag { color: #007acc; }，其中span需预先在HTML中手动包裹关键词。
3、将原始代码中每个语法单元（如标签名、属性名、字符串值）分别用包裹并添加对应class，例如div class="container">。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
