13518219792
1、既然是用插件为实现的功能，那么第一件事就是安装这个插件了
静海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
2、安装好CodeColorer后在wordpress管理后台的设置里面有个CodeColorer选项，点击进去进行配置，
一般情况下只需要将“宽度”设置成您站点文章的宽度就行了。如果希望显示的高亮代码前面显示行号
的话，可以勾选一下格式化里的“显示行号”。
3、在发表文章的时候先在可视化界面编辑好所有文字内容，然后切换到文本界面，在文本界面找到你需要添加高亮代码的地方插入以下标签：code lang=”php” /code，在code lang=”php” /code标签之间插入您需要显示的代码，然后保存文章就可以了。当然您也可以开启CodeColorer的可视化插入代码功能，只需要修改插件目录下的codecolorer.php 文件即可。下面是需要修改的代码，只需要将代码前面的//注释符去掉就可以了。
一直以来在wordpress发布文章的时候不管代码的显示格式，都是按普通的文章本格式来发布的，但后来
发现这样的发布使得代码非常之不美观，又不方便阅读，这样对用户的体验非常不好，所以在网上找了
一些解决代码在文章中高亮显示的方法，经过几次的测试，觉得使用CodeColorer这个插件来实现比较方
便，而且高亮代码显示非常美观，下面给大家讲讲如何使用这个插件。
1、既然是用插件为实现的功能，那么第一件事就是安装这个插件了，详细的安装方法可以参照：
wordpress插件CodeColorer的下载与安装
2、安装好CodeColorer后在wordpress管理后台的设置里面有个CodeColorer选项，点击进去进行配置，
一般情况下只需要将“宽度”设置成您站点文章的宽度就行了。如果希望显示的高亮代码前面显示行号
的话，可以勾选一下格式化里的“显示行号”
3、在发表文章的时候先在可视化界面编辑好所有文字内容，然后切换到文本界面，在文本界面找到你需要添加高亮代码的地方插入以下标签：code lang=”php” /code，在code lang=”php” /code标签之间插入您需要显示的代码，然后保存文章就可以了。当然您也可以开启CodeColorer的可视化插入代码功能，只需要修改插件目录下的codecolorer.php 文件即可。下面是需要修改的代码，只需要将代码前面的//注释符去掉就可以了。
WP-Syntax的插件来实现代码高亮，可以试试；
crayon-syntax-highlighter；
CodeColorer插件，代码高亮比较漂亮，也可以试试；
CodeColorer 默认设置就可以。
WordPress有很多的代码高亮插件，但是效果和使用都不是很理想，后来也就找到了一款WP-Syntax的插件，感觉还是非常不错的。
但是由于WP-Syntax插件的默认样式有些怪异，所以可以使用一下css做一个美化
/* wp_syntax update：2016/04/12*/
.wp_syntax {
color:#100;
background-color:#f9f9f9;
border:1px solid #EBEBEB;
margin:6px 0;
overflow:auto;
}
.wp_syntax {
overflow-x:auto;
overflow-y:hidden;
padding-bottom:expression(this.scrollWidth this.offsetWidth ? 15:0);
width:99%;
}
.wp_syntax table {
border:none;
border-collapse:collapse;
margin:0;
padding:0;
width:100% !important
}
.wp_syntax caption {
padding:2px;
width:100%;
background-color:#def;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
}
.wp_syntax caption a {
color:#1982d1;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
text-decoration:none;
}
.wp_syntax caption a:hover {
color:#1982d1;
text-decoration:underline;
}
.wp_syntax div,.wp_syntax td {
border:none;
text-align:left;
padding:0;
vertical-align:top;
}
.wp_syntax td.code {
background:none;
line-height:normal;
white-space:normal;
padding-left:10px;
}
.wp_syntax pre,.wp_syntax span {
background:transparent;
margin:0;
padding:0;
width:auto;
float:none;
clear:none;
overflow:visible;
font-family:Monaco;
font-size:13px;
line-height:26px;
white-space:pre;
font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;
}
.wp_syntax td.line_numbers {
width:36px
}
.wp_syntax td.line_numbers pre {
border-right:3px solid #666;
background-color:#E7E5DC;
color:gray;
padding:0 5px;
text-align:right;
}
你也可以将上面的代码添加到你主题的 style.css 文件中，然后在 functions.php 中添加下面的代码，取消 WP-Syntax 加载的css文件，这样，即使你以后升级了插件，也能保留你自己的样式。
if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {
remove_action( 'wp_print_styles', 'wp_syntax_style' );
};
这样就非常的好了。
以上代码参考资料： （版权归原作者所有）
