# 帝国cms如何安装highlight插件使编辑器实现代码高亮的方法

*Published:* 2023-11-22
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年11月22日，已超过 180天没有更新



帝国cms[编辑器](https://www.xarjtc.com/tag/%e7%bc%96%e8%be%91%e5%99%a8 "查看编辑器此标签更多文章")中使用代码[高亮](https://www.xarjtc.com/tag/%e9%ab%98%e4%ba%ae "查看高亮此标签更多文章")的方法，教大家如何在帝国cms编辑器中整合[highlight](https://www.xarjtc.com/tag/highlight "查看highlight此标签更多文章")。

[![](https://www.xarjtc.com/wp-content/uploads/2023/11/1588994081134487.png)](https://www.xarjtc.com/wp-content/uploads/2023/11/1588994081134487.png)

1.首先下载highlight

下载地址：https://highlightjs.org/download/

下载解压后styles文件夹里面是风格样式。

2.接下来开始整合到编辑器

在/e/admin/ecmseditor/infoeditor/styles.js 代码中添加：

```
{ name: 'Preformatted Text',element: 'pre' },
```

添加完后编辑器样式会多出一个Preformatted Text选项

在我们需要使用代码高亮的地方使用Preformatted Text样式。

3.在需要使用代码高亮的模板中引入highlight。 可以调整样式在styles文件中，我们这里使用的是tomorrow-night-eighties.css样式。

```
<link rel="stylesheet" type="text/css" href="[!--news.url--]skin/web/css/tomorrow-night-eighties.css" /> 
<script type="text/javascript" src='[!--news.url--]skin/web/js/highlight.js'></script> //放在模板最底部 
<script type="text/javascript"> hljs.initHighlightingOnLoad(); var allpre = document.getElementsByTagName("pre"); for(i = 0; i < allpre.length; i++) { var onepre = document.getElementsByTagName("pre")[i]; var mycode = document.getElementsByTagName("pre")[i].innerHTML; onepre.innerHTML = '<code id="mycode">'+mycode+'</code>'; } </script>
```

至此插件整合完成。