使用Prism.js、CodeMirror、Highlight.js或Monaco Editor可实现HTML5源码高亮与编辑。首先通过Prism.js或Highlight.js在pre-code标签中高亮展示代码，其中Prism需指定语言类，Highlight.js支持自动检测；其次嵌入CodeMirror或Monaco Editor提供可编辑环境，CodeMirror轻量易集成，适合基础编辑，Monaco功能强大如VS Code，适用于复杂场景，需异步加载并初始化编辑器实例，结合使用即可实现高亮预览与实时编辑功能。
如果您希望在网页中展示HTML5文件的源代码并实现高亮预览，同时嵌入一个可编辑代码的编辑器，可以通过使用现成的代码高亮库与富文本或代码编辑器组件来完成。以下是几种可行的实现方式：
一、使用 Prism.js 实现代码高亮
Prism.js 是一个轻量且易于使用的语法高亮库，支持多种编程语言，包括 HTML、CSS、JavaScript 等，适合用于静态代码展示。
1、在页面的 head 标签中引入 Prism.js 的 CSS 文件：
cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
立即学习“前端免费学习笔记（深入）”；
2、在需要展示代码的位置使用 pre 和 code 标签，并指定语言类型：
Test 3、在页面底部引入 Prism.js 的 JavaScript 文件以激活高亮功能：
二、集成 CodeMirror 实现可编辑代码高亮
CodeMirror 是一个功能强大的 Web 代码编辑器组件，支持语法高亮、行号显示、自动缩进等特性，适用于嵌入式代码编辑场景。
1、引入 CodeMirror 的核心 CSS 与 JS 文件：
2、引入 HTML 模式支持文件，确保 HTML 语法高亮正确解析：
3、在页面中创建一个 textarea 或 div 元素作为编辑器容器：
4、初始化 CodeMirror 编辑器实例：
var editor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
lineNumbers: true,
mode: "text/html",
htmlMode: true,
theme: "default"
});
三、使用 Highlight.js 进行自动语言检测高亮
Highlight.js 能够自动识别代码语言并进行语法着色，适合展示多种语言混合的代码片段。
1、在 head 中引入 Highlight.js 的样式文件：
2、引入 Highlight.js 的 JavaScript 文件：
3、使用 pre 和 code 标签包裹代码内容，无需指定语言也可自动检测：
4、在页面加载完成后调用 hljs.initHighlightingOnLoad() 或手动执行高亮：
四、结合 Monaco Editor 嵌入类 VS Code 编辑器
Monaco Editor 是 Visual Studio Code 的核心编辑器，功能完整，适合需要高级编辑功能的场景。
1、通过 CDN 引入 Monaco Editor（需异步加载）：
import * as monaco from 'https://esm.sh/monaco-editor@0.44.0/esm/vs/editor/editor.main';
2、创建一个具有固定宽高的 div 容器用于承载编辑器：
3、初始化编辑器实例并设置语言模式为 html：
monaco.editor.create(document.getElementById("container"), {
value: '\n\n
\nHello
\n\n',language: 'html',
theme: 'vs-light',
automaticLayout: true
});
4、注意：Monaco Editor 体积较大，建议仅在需要完整 IDE 功能时使用。
