WordPress代码高亮插件：WP-Syntax
时间：2019-08-29 阅读：478
在此之前一直使用 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 | <pre lang="html" line="1" escaped="true" >//这里添加代码……</pre> |
其中，lang="html"表示代码语言为html，请根据自己需要修改； line="1" 表示显示行号，如果不需要，去掉即可；escaped="true" 是为了防止代码转义，如果不需要，去掉即可。
注意：在wordpress后台使用 WP-Syntax 等代码高亮插件，需要在html模式下添加代码，不要随意切换到可视化模式，否则代码就容易转义！！
WP-Syntax 插件支持的高亮语言
1 | '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 的css样式看起来比较难看，所以倡萌自己修改了一下，最终的效果如下图
如果你需要，可以使用下面的代码，覆盖该插件的 wp-syntax/wp-syntax.css 的代码
1 | .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 | if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {remove_action( 'wp_print_styles', 'wp_syntax_style' );}; |
网友评论