UEditor文章页面集成highlight.js实现代码高亮

为什么需要代码高亮

技术类文章经常需要展示代码片段。默认情况下，UEditor编辑器插入的代码块只是简单的 pre + code 标签包裹，没有任何语法着色，所有代码都是同一个颜色，阅读体验差，专业感不足。

通过集成highlight.js，可以让文章页面中的代码块自动识别语言并加上语法着色，效果媲美VS Code、Sublime Text等专业编辑器。

highlight.js 简介

highlight.js 是一款轻量级的JavaScript代码高亮库，具有以下特点：

• 支持190+种编程语言（JavaScript、PHP、Python、CSS、SQL、Bash等）
• 内置多种主题风格（暗色/亮色，共90+套）
• 自动检测语言（也可手动指定）
• 零依赖，gzip压缩后仅约20KB
• 通过CDN引入即可使用，无需构建工具

集成步骤

第一步：选择主题

highlight.js 提供了丰富的主题，可在官网demo页面预览效果。本文以暗色主题 atom-one-dark 为例，适合技术博客风格。

常用的主题推荐：

• 暗色系：atom-one-dark、monokai、github-dark、vs2015
• 亮色系：github、atom-one-light、vs、stackoverflow-light

第二步：修改文章详情页模板

找到易优CMS的文章详情页模板文件：/template/pc/view_article.htm（PC端）或对应移动端模板，在头部引入 highlight.js：

/* 在 view_article.htm 的 head 区域加入以下三行 */
/* 引入 highlight.js 主题样式（暗色 atom-one-dark） */


/* 引入 highlight.js 核心库 */


/* 页面加载完成后自动高亮所有代码块 */

第三步：在文章中使用代码块

使用 highlightAll() 方法可以自动检测语言，但手动指定语言类名可以获得更准确的高亮效果。在UEditor中切换到HTML源码模式，编写如下结构：

/* JavaScript 代码块示例 */

function hello() {
    console.log("Hello World");
}


/* PHP 代码块示例 */

function hello() {
    echo "Hello World";
}


/* CSS 代码块示例 */

body {
    background: #fff;
    color: #333;
}

常用语言类名对照

语言	类名	说明
JavaScript	language-javascript	前端脚本
PHP	language-php	后端脚本
Python	language-python	AI/数据分析
CSS	language-css	样式表
HTML/XML	language-xml	标记语言
SQL	language-sql	数据库查询
Bash/Shell	language-bash	命令行脚本
JSON	language-json	数据格式
TypeScript	language-typescript	类型化JS
Java	language-java	企业开发

方案优势

1. 零侵入：不需要修改UEditor编辑器本身，只在文章展示模板中引入即可
2. 即插即用：CDN引入，3行代码搞定，无需npm/webpack等构建工具
3. 向后兼容：已有文章中未指定语言的代码块，highlight.js会自动检测
4. 性能友好：库体积小，CDN加速，首次加载后浏览器缓存
5. 升级方便：只需更新CDN链接中的版本号即可升级

实际效果对比

使用前：代码块无语法着色，所有文字同一颜色，难以区分关键字、字符串、注释等。

使用后：关键字、字符串、数字、注释等各具颜色，代码结构一目了然，文章专业度大幅提升，效果媲美专业IDE编辑器。

扩展建议

• 如需支持代码行号显示，可引入 highlight.js 的 line-numbers 插件
• 如需代码块复制按钮，可结合 clipboard.js 在页面中给每个代码块增加复制功能
• 如果网站服务器在国内，建议将 highlight.js 文件下载到本地目录，避免依赖国外CDN
• 可将代码高亮的初始化封装成公共函数，在多个模板（如列表页、搜索页）中复用

注意事项

1. 一定要将初始化脚本放在 DOMContentLoaded 事件中，确保DOM加载完毕后再执行高亮
2. 如果文章内容是通过AJAX动态加载的，需要在加载完成后手动调用 hljs.highlightAll()
3. HTML代码示例中的尖括号需要转义（< 和 >），否则会被浏览器解析为真实标签
4. highlight.js会自动检测代码语言，但手动指定 class="language-xxx" 可以获得更准确的高亮效果