网上要很多好看的代码高亮插件,很炫很好看;可我这人比较喜欢简单好看的不喜欢花花绿绿的 这里就分享一个免插件添加好看的灰底代码块的方法

一(修改code样式:

在你wp-content\themes\下找到你的主题文件夹并找到style.css文件 找到或添加如下代码 code { background-color: #eee; border-radius: 5px; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 80%; margin: 0 2px; padding: 4px 5px; vertical-align: middle; } #代码效果如上,比较适合在文字中添加部分代码

二(为code添加一个自定义快捷标签按钮

进去后台点击外观——>编辑找到模板函数文件functions.php #文件名以主题文件为主,部分主题会不一样 添加如下代码
//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
    QTags.addButton( 'hr', 'hr', "<hr />", "" );
    QTags.addButton( 'h1', 'h1', "<h1>", "</h1>" );
    QTags.addButton( 'h2', 'h2', "<h2>", "</h2>" );
    QTags.addButton( 'h3', 'h3', "<h3>", "</h3>" );
    QTags.addButton( 'pre', 'pre', "<pre>", "</pre>" );
	  QTags.addButton( 'code', 'code', "<code>", "</code>" );
</script>
<?php
}