WordPress代码高亮插件：WP-Syntax

倡萌在此之前一直使用 WP-CodeBox 代码高亮插件，但使用 Windows Live Writer (简称 WLW )发布含有代码的文章，代码都会被转义，需要进入WordPress后台的Html模式下重新编辑代码，很是麻烦。搜索得知，要防止转义，可以添加 escaped="true" 属性，经过测试，发现 WP-CodeBox 插件不支持 escaped="true" 属性，所以只好使用其他插件。

由于 WP-CodeBox 使用的是<pre />容器，所以也最好找个同样使用<pre />容器的插件，最后选择了 WP-Syntax 代码高亮插件，WP-Syntax 和 WP-CodeBox 都是基于GeSHi支持的语言的语法，使用方法基本一样，最重要的是 WP-Syntax 支持 escaped="true" 属性。

文章目录

Toggle

WP-Syntax 代码书写格式

&lt;pre lang=&quot;html&quot; line=&quot;1&quot; escaped=&quot;true&quot; &gt;
//这里添加代码……
&lt;/pre&gt;

其中，lang="html"表示代码语言为html，请根据自己需要修改； line="1" 表示显示行号，如果不需要，去掉即可；escaped="true" 是为了防止代码转义，如果不需要，去掉即可。

注意：在wordpress后台使用 WP-Syntax 等代码高亮插件，需要在html模式下添加代码，不要随意切换到可视化模式，否则代码就容易转义！！

WP-Syntax 插件支持的高亮语言

'actionscript' =&gt; array('as'),
'ada' =&gt; array('a', 'ada', 'adb', 'ads'),
'apache' =&gt; array('conf'),
'asm' =&gt; array('ash', 'asm', 'inc'),
'asp' =&gt; array('asp'),
'bash' =&gt; array('sh'),
'bf' =&gt; array('bf'),
'c' =&gt; array('c', 'h'),
'c_mac' =&gt; array('c', 'h'),
'caddcl' =&gt; array(),
'cadlisp' =&gt; array(),
'cdfg' =&gt; array('cdfg'),
'cobol' =&gt; array('cbl'),
'cpp' =&gt; array('cpp', 'hpp', 'C', 'H', 'CPP', 'HPP'),
'csharp' =&gt; array('cs'),
'css' =&gt; array('css'),
'd' =&gt; array('d'),
'delphi' =&gt; array('dpk', 'dpr', 'pp', 'pas'),
'diff' =&gt; array('diff', 'patch'),
'dos' =&gt; array('bat', 'cmd'),
'gettext' =&gt; array('po', 'pot'),
'gml' =&gt; array('gml'),
'gnuplot' =&gt; array('plt'),
'groovy' =&gt; array('groovy'),
'haskell' =&gt; array('hs'),
'html4strict' =&gt; array('html', 'htm'),
'ini' =&gt; array('ini', 'desktop'),
'java' =&gt; array('java'),
'javascript' =&gt; array('js'),
'klonec' =&gt; array('kl1'),
'klonecpp' =&gt; array('klx'),
'latex' =&gt; array('tex'),
'lisp' =&gt; array('lisp'),
'lua' =&gt; array('lua'),
'matlab' =&gt; array('m'),
'mpasm' =&gt; array(),
'mysql' =&gt; array('sql'),
'nsis' =&gt; array(),
'objc' =&gt; array(),
'oobas' =&gt; array(),
'oracle8' =&gt; array(),
'oracle10' =&gt; array(),
'pascal' =&gt; array('pas'),
'perl' =&gt; array('pl', 'pm'),
'php' =&gt; array('php', 'php5', 'phtml', 'phps'),
'povray' =&gt; array('pov'),
'providex' =&gt; array('pvc', 'pvx'),
'prolog' =&gt; array('pl'),
'python' =&gt; array('py'),
'qbasic' =&gt; array('bi'),
'reg' =&gt; array('reg'),
'ruby' =&gt; array('rb'),
'sas' =&gt; array('sas'),
'scala' =&gt; array('scala'),
'scheme' =&gt; array('scm'),
'scilab' =&gt; array('sci'),
'smalltalk' =&gt; array('st'),
'smarty' =&gt; array(),
'tcl' =&gt; array('tcl'),
'vb' =&gt; array('bas'),
'vbnet' =&gt; array(),
'visualfoxpro' =&gt; array(),
'whitespace' =&gt; array('ws'),
'xml' =&gt; array('xml', 'svg'),
'z80' =&gt; array('z80', 'asm', 'inc')

WP-Syntax 安装使用

官方下载WP-Syntax | 备用下载 WP-Syntax | 也可后台搜索安装

WP-Syntax 优化技巧

说真的，WP-Syntax 的css样式看起来比较难看，所以倡萌自己修改了一下，最终的效果如下图

wpdaxue.com-2012100301

如果你需要，可以使用下面的代码，覆盖该插件的 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 &gt; 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' );
};

来源：

https://www.wpdaxue.com/wp-syntax.html

WP-Syntax 代码书写格式

WP-Syntax 插件支持的高亮语言

WP-Syntax 安装使用

WP-Syntax 优化技巧

猜你喜欢