帝国 CMS 默认编辑器中添加代码高亮功能，可以通过引入第三方代码高亮库来实现。下面以使用 Prism.js 为例，为你详细介绍具体步骤：

步骤一：下载 Prism.js 库

你可以从 Prism.js 的官方网站（https://prismjs.com/）下载该库。在下载页面，根据你的需求选择需要的语言支持和主题，然后点击下载按钮获取压缩包。

步骤二：上传文件到服务器

将下载并解压后的 Prism.js 文件夹上传到帝国 CMS 网站的合适目录，例如可以在网站根目录下创建一个名为 prism 的文件夹，将 prism.css、prism.js 以及相关的语言文件上传到该文件夹中。

步骤三：修改编辑器模板文件

通常帝国 CMS 默认编辑器使用的是 eWebEditor，你需要修改相关的模板文件来引入 Prism.js 库。

1. 找到编辑器的模板文件


一般位于 e/data/html/ 目录下，找到包含编辑器调用的模板文件，例如 info_template.html。

2. 引入 Prism.js 的 CSS 和 JavaScript 文件

在模板文件的 <head> 标签中添加以下代码： 
<link rel="stylesheet" href="/prism/prism.css">
<script src="/prism/prism.js"></script>
这里的路径 /prism/ 是你上传 Prism.js 文件的目录，根据实际情况进行调整。

步骤四：修改内容显示模板

在帝国 CMS 的内容显示模板（如文章详情页模板）中，需要对代码块进行相应的处理，以便 Prism.js 能够正确识别和高亮显示代码。

1. 使用特定的 HTML 结构包裹代码块

在文章内容中，将代码块用 <pre> 和 <code> 标签包裹，并为 <code> 标签添加对应的语言类名。例如，如果你要显示一段 JavaScript 代码，可以这样写： 
<pre><code class="language-javascript">
// 这里是你的JavaScript代码
function helloWorld() {
    console.log('Hello, World!');
}
</code></pre>

2. 确保内容输出时保留 HTML 标签

在帝国 CMS 的模板标签中，确保输出文章内容时不进行 HTML 标签过滤。例如，使用 <?=$navinfor['newstext']?> 输出文章内容，而不是进行了过滤处理的标签。

步骤五：测试代码高亮效果

在帝国 CMS 后台发布一篇包含代码块的文章，按照上述步骤添加 <pre> 和 <code> 标签并指定语言类名。然后在前台查看文章详情页，应该可以看到代码块已经实现了高亮显示。

注意事项

  • 语言支持：Prism.js 默认支持多种常见语言，但如果你需要支持一些特殊语言，需要在下载时选择相应的语言文件，或者手动添加对应的语言插件。
  • 兼容性：在不同的浏览器和设备上测试代码高亮效果，确保兼容性良好。
  • 更新维护：定期检查 Prism.js 库是否有更新，及时更新以获取更好的性能和更多的功能。