WP-CodeBox代码高亮插件，它支持多种语言、代码下载、复制到剪贴板、代码框收放及后台默认属性设置多项功能，使用起来也比较方便。

WP-CodeBox插件安装：

下载WP-CodeBox插件，将压缩包解压后，把文件夹上传到wp-content/plugins/目录下。 或者在博客后台直接添加新插件，搜“WP-CodeBox”，在线安装即可。
登录WordPress管理后台，点击“Plugins”找到上传的插件，激活该插件。
插件激活后，在“Setting”–>“WP-CodeBox“中设置相关信息

wordpress-wp-codebox1

使用方法：

在插入代码前，将wordpress 编辑器切换为“HTML编辑”模式！

在图中基本上对插件的相关功能都进行了说明，在页面中，其实你也不用进行任何设置，保持默认即可，安装成功后，接下来就是使用插件了，使用之前先来介绍下WP-CodeBox插件的相关语法：

WP-Syntax 代码书写格式 ：

//这里添加代码……     < /pre> 
解释：
 lang="html"表示代码语言为html，请根据自己需要修改；代码的语言,如ASP、PHP、Java等
 line="1" 表示显示行号，如果不需要，去掉即可 line="0" ；
 escaped="true" 是为了防止代码转义，如果不需要，去掉即可。
    注意：在wordpress后台使用 WP-Syntax 等代码高亮插件，需要在html模式下添加代码，不要随意切换到可视化模式，否则代码就容易转义！！
演示：
  


        
        


 代码css优化：
如果你需要，可以使用下面的代码，覆盖该插件的 wp-syntax/wp-syntax.css 的代码

.wp_syntax {
        color:#100;
        background-color:#f9f9f9;
        border:1px solid #EBEBEB;
        margin:0 0 1.5em 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 {
        background:transparent;
        margin:0;
        padding:0;
        width:auto;
        float:none;
        clear:none;
        overflow:visible;
        font-family:Monaco;
        font-size:13px;
        line-height:20px;
        white-space:pre;
}
.wp_syntax td.line_numbers pre {
        border-right:3px solid #6CE26C;
        background-color:#E7E5DC;
        color:gray;
        width:20px;
        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' );
};

 
CopyRights: The Post by BY-NC-SA For Authorization，Original If Not Noted，Reprint Please Indicate From IT人生_IT一二三_iTrensheng_AiTi123_(已建12年)
Post Link: 【WordPress】插入高亮代 WP-Syntax插件