实现方法是通过加载Prism.JS来实现代码高亮。

为什么选用Prism.js？

除了简单，小巧之外，还有以下优点

1. 极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！

2. 天生伶俐：语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。

3. 轻如鸿毛：代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。

4. 快如闪电：如果可能，支持通过 Web Workers 实现并行。

5. 轻松扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。

6. 丰富样式：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

一、首先下载Prism.JS

http://prismjs.com/download.html

点击上边进入下载页面，进入后需要自己选择比如，语言参照着百度编辑器里有的语言来选择，插件我就选择了个行号插件和复制插件。

二、引入Prism.JS

 <link href="prism.css" rel="stylesheet" />
 <script src="prism.js"></script>

三、转换格式代码

因为百度编辑器使用代码功能默认生成的格式不是Prism.JS的格式，所以需要用以下代码替换，该代码放入内容后边。

jQuery(document).ready(function($){(function(){
    var doc_pre = $('pre');
    doc_pre.each(function(){
        var class_val = $(this).attr('class');
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');
        var lan_class = 'language-'+class_arr['1'];
        var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
        $(this).attr("class",'line-numbers '+lan_class);
    });})();});

四、修改prism.css文件

打开prism.css文件，修改如下两个地方

1、解决XunRuiCMS默认CSS覆盖问题

搜索background:#2d2d2d后边添加!important提高这段CSS的优先级。

因为XunRuiCMS默认的CSS里颜色和这个不一致会覆盖它。

2、自动换行

搜索white-space: pre;修改为:white-space: pre-wrap;