倡萌在此之前一直使用 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" 属性。
WP-Syntax 代码书写格式
1 2 3 | <pre lang="html" line="1" escaped="true" > //这里添加代码…… </pre> |
<pre lang="html" line="1" escaped="true" > //这里添加代码…… </pre>
其中，lang="html"表示代码语言为html，请根据自己需要修改； line="1" 表示显示行号，如果不需要，去掉即可；escaped="true" 是为了防止代码转义，如果不需要，去掉即可。
注意：在wordpress后台使用 WP-Syntax 等代码高亮插件，需要在html模式下添加代码，不要随意切换到可视化模式，否则代码就容易转义！！
WP-Syntax 插件支持的高亮语言
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 'actionscript' => array('as'), 'ada' => array('a', 'ada', 'adb', 'ads'), 'apache' => array('conf'), 'asm' => array('ash', 'asm', 'inc'), 'asp' => array('asp'), 'bash' => array('sh'), 'bf' => array('bf'), 'c' => array('c', 'h'), 'c_mac' => array('c', 'h'), 'caddcl' => array(), 'cadlisp' => array(), 'cdfg' => array('cdfg'), 'cobol' => array('cbl'), 'cpp' => array('cpp', 'hpp', 'C', 'H', 'CPP', 'HPP'), 'csharp' => array('cs'), 'css' => array('css'), 'd' => array('d'), 'delphi' => array('dpk', 'dpr', 'pp', 'pas'), 'diff' => array('diff', 'patch'), 'dos' => array('bat', 'cmd'), 'gettext' => array('po', 'pot'), 'gml' => array('gml'), 'gnuplot' => array('plt'), 'groovy' => array('groovy'), 'haskell' => array('hs'), 'html4strict' => array('html', 'htm'), 'ini' => array('ini', 'desktop'), 'java' => array('java'), 'javascript' => array('js'), 'klonec' => array('kl1'), 'klonecpp' => array('klx'), 'latex' => array('tex'), 'lisp' => array('lisp'), 'lua' => array('lua'), 'matlab' => array('m'), 'mpasm' => array(), 'mysql' => array('sql'), 'nsis' => array(), 'objc' => array(), 'oobas' => array(), 'oracle8' => array(), 'oracle10' => array(), 'pascal' => array('pas'), 'perl' => array('pl', 'pm'), 'php' => array('php', 'php5', 'phtml', 'phps'), 'povray' => array('pov'), 'providex' => array('pvc', 'pvx'), 'prolog' => array('pl'), 'python' => array('py'), 'qbasic' => array('bi'), 'reg' => array('reg'), 'ruby' => array('rb'), 'sas' => array('sas'), 'scala' => array('scala'), 'scheme' => array('scm'), 'scilab' => array('sci'), 'smalltalk' => array('st'), 'smarty' => array(), 'tcl' => array('tcl'), 'vb' => array('bas'), 'vbnet' => array(), 'visualfoxpro' => array(), 'whitespace' => array('ws'), 'xml' => array('xml', 'svg'), 'z80' => array('z80', 'asm', 'inc') |
'actionscript' => array('as'), 'ada' => array('a', 'ada', 'adb', 'ads'), 'apache' => array('conf'), 'asm' => array('ash', 'asm', 'inc'), 'asp' => array('asp'), 'bash' => array('sh'), 'bf' => array('bf'), 'c' => array('c', 'h'), 'c_mac' => array('c', 'h'), 'caddcl' => array(), 'cadlisp' => array(), 'cdfg' => array('cdfg'), 'cobol' => array('cbl'), 'cpp' => array('cpp', 'hpp', 'C', 'H', 'CPP', 'HPP'), 'csharp' => array('cs'), 'css' => array('css'), 'd' => array('d'), 'delphi' => array('dpk', 'dpr', 'pp', 'pas'), 'diff' => array('diff', 'patch'), 'dos' => array('bat', 'cmd'), 'gettext' => array('po', 'pot'), 'gml' => array('gml'), 'gnuplot' => array('plt'), 'groovy' => array('groovy'), 'haskell' => array('hs'), 'html4strict' => array('html', 'htm'), 'ini' => array('ini', 'desktop'), 'java' => array('java'), 'javascript' => array('js'), 'klonec' => array('kl1'), 'klonecpp' => array('klx'), 'latex' => array('tex'), 'lisp' => array('lisp'), 'lua' => array('lua'), 'matlab' => array('m'), 'mpasm' => array(), 'mysql' => array('sql'), 'nsis' => array(), 'objc' => array(), 'oobas' => array(), 'oracle8' => array(), 'oracle10' => array(), 'pascal' => array('pas'), 'perl' => array('pl', 'pm'), 'php' => array('php', 'php5', 'phtml', 'phps'), 'povray' => array('pov'), 'providex' => array('pvc', 'pvx'), 'prolog' => array('pl'), 'python' => array('py'), 'qbasic' => array('bi'), 'reg' => array('reg'), 'ruby' => array('rb'), 'sas' => array('sas'), 'scala' => array('scala'), 'scheme' => array('scm'), 'scilab' => array('sci'), 'smalltalk' => array('st'), 'smarty' => array(), 'tcl' => array('tcl'), 'vb' => array('bas'), 'vbnet' => array(), 'visualfoxpro' => array(), 'whitespace' => array('ws'), 'xml' => array('xml', 'svg'), 'z80' => array('z80', 'asm', 'inc')
WP-Syntax 安装使用
官方下载WP-Syntax | 备用下载 WP-Syntax | 也可后台搜索安装
WP-Syntax 优化技巧
说真的，WP-Syntax 的css样式看起来比较难看，所以倡萌自己修改了一下，最终的效果如下图
如果你需要，可以使用下面的代码，覆盖该插件的 wp-syntax/wp-syntax.css 的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | .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; } |
.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文件，这样，即使你以后升级了插件，也能保留你自己的样式。
1 2 3 | if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) { remove_action( 'wp_print_styles', 'wp_syntax_style' ); }; |
if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) { remove_action( 'wp_print_styles', 'wp_syntax_style' ); };
本文WordPress代码高亮插件：WP-Syntax到此结束。因为某人不如你所愿爱你，并不意味着你不被别人所爱。小编再次感谢大家对我们的支持！
