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