7B2主题代码高亮模块美化

7b2主题是自带有默认的代码高亮模块样式，但是提供给我们的样式又太丑有不美观，字体又小而且后台还需要自己手动加<pre>段代码才能进行显示出代码高亮的效果，所以球长自己就在原基础的代码上做出了调整进行美化了一下，在后台的编辑器工具栏中加入了一个代码按钮组件这样操作方便又快捷，需要的查看下面代码流程进行操作更改就行了。

默认样式：

很多小伙伴说默认的样式和他的又有些不一样，因为在此之前球长我是改了一版的，春哥和极子主题提供的实在是太丑了没法看。

美化后样式

编辑器添加按钮效果

教程开始

这里教程是子主题的教程，因为球长用的就是极子主题，父主题的也是一样 的找到对应的css直接复制下面代码替换就行，如果不会的可以联系球长协助操作。

2、极子主题在代码高亮模块上可以定义一排小字随便自己怎么更改都没关系，在更改样式的时候我发现他是和复制按钮的样式用到了同一个样式，所以这里球长把它单独分离出来了需要重新定义一下class类名就好，上面已经把自定义代码加进去了，找到：/b2Jitheme/Render/Js/jitheme.js文件

3、上面就是代码高亮美化的代码，接下来是在编辑器中把代码高亮按钮添加到工具栏中，球长觉得每次编写代码都要在编辑器中加入<pre>标签觉得麻烦所以干脆就取消掉了，直接改用代码高亮按钮插入编辑器中。

这里需要注意的是在里面如果你是放置在父主题里面的需要改一行代码，因为这是我放置子主题里面的

// 父主题专用
$plugin_array['custom_code'] = get_template_directory_uri() . '/js/code-button.js';

// 子主题使用
$plugin_array['custom_code'] = get_stylesheet_directory_uri() . '/js/code-button.js';
//后面的就是你放置的js文件的地址，可以根据自己放置js文件来定义，注意文件夹的大小写

对代码高亮里面的颜色如果不喜欢，可以自己在css里面进行调整自己喜欢的颜色，已经给了详细的注释了，根据注释来调整就行。

到此教程就结束了，更改过程中遇到有什么问题再本站中对应的交流中心进行交流，总有人会可以回答你的问题。