折腾无极限
不曾长大

WordPress代码高亮插件WP-Syntax使用及优化

WordPress自带的Code代码显示太弱了,如果代码之前隔一个空白行,就会分开来显示。为此,特地找了个高亮代码显示插件。找了两个插件,一个是WP-Syntax,196793次下载;另外一个是WP-CodeBox,只有94292,最后采用了WP-Syntax。

WP-Syntax确实不错,使用geshi语法引擎,很是方便,但因为没有横向比较,也说不出具体好在哪里。这里就大概介绍下吧:

一、安装

WordPress后台-插件-安装新的插件-搜索“WP-Syntax”,点击安装;或到官方下载,上传至“wp-content/plugins/”内,然后开启。

二、使用

编辑文章时,选择HTML模式下,插入

(pre lang=”LANGUAGE” line=”1“)这里是你要放置的代码。。。(/pre)
(把圆括号换成方括号即可)

其中lang=””内为高亮代码的种类,较常用的有php、css和javascript,当然WP-Syntax可以支持更多,具体如下:

abap, actionscript, actionscript3, ada, apache, applescript, aptsources, asm, asp, autoit, avisynth, bash, bf, blitzbasic, bnf, boo, c, cmac, caddcl, cadlisp, cil, cfdg, cfm, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, winbatch, xml, xorg_conf, xpp, z80
注:(LANGUAGE属性,黑体字显示的是比较流行的代码)

line=””是显示行号。比如 line=”1″的意思是从行号1开始显示,可以自己修改起始行号。如果不想显示行号,去掉 line=”1″ 这个属性即可。

三、优化

1、修改默认显示字体:打开“wp-syntax/geshi/geshi.php”,找到如下语句,修改“monospace”为想要的字体:

 
var $overall_style = 'font-family:monospace;';

我修改成

 
var $overall_style = 'font-family:Microsoft Yahei;';

2、修改代码字体的大小。打开 “wp-syntax.css” ,把 “.wp_syntax pre” 里面的 “font-size” 修改为你想要的大小即可。

3、修改某种语言的高亮规则。在 “wp-syntax/geshi/geshi” 里找到你要修改的”语言.php”,可以参考网上教程改哈。

我重新修改了原来的样式,打开“wp-syntax/wp-syntax.css”,原来的清空然后添加:

.wp_syntax {color:#100;background-color:#f9f9f9;margin:0 1em;overflow:auto;} 
.wp_syntax table {border:0px;border-collapse:collapse;} 
.wp_syntax div,.wp_syntax td {border-top:border:0px;padding:0px;vertical-align:top;padding:2px 4px;} 
.wp_syntax .line_numbers {border:0px;text-align:right;background-color:#def;color:gray;overflow:visible;} 
.wp_syntax .code {border:0px;}
.wp_syntax pre {font-size:12px;margin:0;width:auto;float:none;clear:none;overflow:visible;word-wrap:break-word;line-height:1.5;white-space:pre;}

4、在后台添加WP-Syntax代码按键
后台编辑器中添加按钮,可以很方便的插入代码,但是需要修改“wp-includes/js/quicktags.js”。本人没有亲自操作,而且原来作者提供的修改文件过于旧了,毕竟现在WordPress是3.3.2的版本了。具体使用方法及代码详情见 http://ons.me/129.html

5、提高速度
因为WP-Syntax插件”/wp-syntax/geshi/geshi/”文件下含有过多的语言php文件,影响了博客的加载速度,建议保留常用的一些语言,其它都可以去掉即可。

友情提示:WP-Syntax代码高亮的效果必须在代码编辑器里面编辑,粘贴的代码一定要在代码编辑器里面,不要在代码和可视化之间来回切换,因为由“HTML”进入“可视化”部分代码会被WordPress自动转换,这样会出现错误。

赞(0) 打赏
未经允许不得转载:子痕的博客 » WordPress代码高亮插件WP-Syntax使用及优化

评论 11

  1. #-19

    我也是一直用的这款插件

    久酷12年前 (2012-04-28)回复
  2. #-18

    @久酷 这款插件是蛮好的,比coolcode改代码要好一点的~

    子痕12年前 (2012-04-29)回复
  3. #-17

    但这款插件有一点不好,就是在订阅源中没法实现高亮。一直在寻找解决方法。

    sky!0ooo12年前 (2012-10-05)回复
    • @sky!0ooo  如果订阅源中也高亮,那就是直接插入大量的html代码了,反而以后转换不方便~

      子痕12年前 (2012-10-12)回复
  4. #-16

    好像是还不错….

    谢单单12年前 (2012-11-27)回复
    • @谢单单  你的皮肤错位很厉害~

      子痕11年前 (2012-11-27)回复
    • @子痕   求。。求告知。。除了IE6。。你用什么浏览器???竟然错位得厉害。。

      谢单单11年前 (2012-11-27)回复
    • @谢单单  额。。。我一直用chrome,偶尔用firefox,均是最新版,没办法的时候用ie10~

      子痕11年前 (2012-11-27)回复
  5. #-15

    蛮不错,这个是我见过最详细的教程了

    Kaedeen11年前 (2012-12-17)回复
  6. #-14

    我的很小啊,随着代码改变大小,怎么改动啊

    杨尚斌10年前 (2014-03-30)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏