文章目录[隐藏]
因为某些原因,更换代码插件到 WP-Syntax。据说这也是 WordPress 官方推荐的插件。特此记录一下折腾过程。
如何添加代码高亮
切换你的 WordPress 编辑器到 HTML 模式,使用以下格式添加代码:
<pre lang="Language" line="1" escaped="true" > </pre>
更换 WP-Syntax 代码样式
说真的,WP-Syntax 的 CSS 样式看起来比较难看,所以修改了一下,参考倡萌的修改方法,在你的主题的 style.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;
}
然后,在你主题的 Functions.php 中添加以下代码来禁用 WP-Symtax 插件的 CSS 样式代码。
<?php
if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {
remove_action( 'wp_print_styles', 'wp_syntax_style' );
};
?>