如何在HTML中简单实现代码块的彩色高亮着色？

需求说明 #

需要在网站中添加代码块展示各类HTML/CSS组件，实现代码彩色高亮效果，但手动给代码逐段加span标签加样式的操作过于繁琐，希望找到更高效的实现方式。
现有的参考案例（如Bootstrap 5官方组件文档的代码块）是通过大量携带不同样式属性的独立span标签对代码各部分进行着色，实现成本很高，不适合批量使用。

解决方案 #

不需要手动编写大量带属性的span标签，直接使用成熟的开源语法高亮库即可快速实现需求，highlight.js是适配该场景的极佳选择：

• 集成成本极低，仅需引入核心库和主题样式，不需要对原始代码做额外的标签嵌套处理
• 自动识别代码语言，支持HTML、CSS等上百种编程语言的语法高亮
• 内置数十种预设配色主题，可直接适配不同网站的设计风格，无需手动调整样式
• 支持自定义语法规则，可满足特殊场景的高亮需求

基础集成步骤 #

1. 引入highlight.js核心脚本文件和对应主题的CSS文件
2. 将需要展示的原始代码直接放在<pre><code>标签容器内，不需要添加任何额外属性或嵌套标签
3. 页面加载完成后调用初始化方法即可自动完成所有代码块的高亮渲染

实践参考 #

有同类需求的开发者可参考该经过验证的方案：最终选择使用highlight.js实现该功能，它使用门槛极低，参照官方教程即可快速完成在HTML项目中的集成。

内容的提问来源于stack exchange，提问作者jchillin111