Dedecms集成百度UEditor实现代码高亮功能

在使用百度编辑器UEditor时，许多用户会遇到一个问题：后台编辑时代码高亮显示正常，但前台浏览文章时代码却失去了高亮效果。这不仅影响用户体验，还可能让用户对网站的专业性产生怀疑。那么，为什么会出现这种情况呢？

其实，问题的根源在于内容页缺少必要的代码高亮支持文件。虽然百度编辑器提供了代码高亮功能，但如果在前端页面中没有正确引用相关JS和CSS文件，代码高亮自然无法生效。

### 解决办法
为了确保前台代码高亮正常显示，我们需要手动引入UEditor自带的高亮文件。以下是具体步骤：

1. **找到高亮文件**
UEditor的代码高亮文件位于`third-party/SyntaxHighlighter/`目录下，主要包括两个文件：
- `shCore.js`（JavaScript文件）
- `shCoreDefault.css`（样式文件）

2. **修改文章内容页模板**
打开你的文章内容页模板文件（通常是`article_article.htm`），然后按照以下方法进行修改：

- 在``标签内添加CSS样式文件：


<link href="/include/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />

- 在``标签前添加JavaScript文件及初始化代码：


<script type="text/javascript" src="/include/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

<script type="text/javascript">

    SyntaxHighlighter.all();

</script>

3. **路径调整**
注意！上述代码中的路径是默认路径，请根据你实际安装UEditor的位置进行调整。如果UEditor被放置在其他目录下，请修改文件路径以匹配实际情况。

4. **更新网站缓存**
完成以上修改后，进入DedeCMS后台，点击“生成” -> “更新网站”，确保所有更改生效。

5. **测试效果**
最后，在前台查看一篇文章，检查代码是否已经高亮显示。如果一切正常，恭喜你成功解决了这个问题！

通过以上步骤，你可以轻松实现UEditor代码高亮功能在前台的正常显示。这样不仅能提升网站的专业形象，还能为开发者用户提供更好的阅读体验。希望这篇文章对你有所帮助！

推荐阅读