wordpress代码高亮显示 wp-WP-Syntax

wordpress文章中插入代码

1. 下载WP-Syntax插件，安装激活 使用方法：代码片段之前加上 ,lang="你的代码语言"

2. 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-Syntax 加载的css文件，这样，即使你以后升级了插件，也能保留你自己的样式。
if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {
remove_action( 'wp_print_styles', 'wp_syntax_style' );
};

	        
本文由
            bigwei08028 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
            
最后编辑时间为: 2019-01-09 15:56 Wednesday