WordPress代码高亮插件:WP-Syntax

文章目录

之前一直使用wlw来写博客,但是wlw经常出现点什么问题,而且需要安装软件,换个地方写博客不是很方便。于是现在基本上使用wordpress编辑器写博文。因为经常要贴些代码,有必要去找一款代码高亮插件。经过查找,发现WP-Syntax不错,于是乎把之前的代码全部改成了WP-Syntax样式,花了不少功夫。

WP-Syntax安装和使用

在wordpress后台搜索“WP-Syntax”安装即可。

WP-Syntax使用时,在html模式下添加以下代码:

1
2
3
 <  pre lang="html" line="1" escaped="true" >
 //这里添加代码……
 < /pre>

其中,lang=”html”表示代码语言为html,请根据自己需要修改; line=”1″ 表示显示行号,如果不需要,去掉即可;escaped=”true” 是为了防止代码转义,如果不需要,去掉即可。使用时请把<后的空格去掉
值得注意的是:不要随意切换到可视化模式,否则代码就容易转义!!

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')

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;
}

你也可以将上面的代码添加到你主题的 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' );
};

小结

具体的效果可以查看我现在的代码样式。

参考文章:http://www.wpdaxue.com/wp-syntax.html



本文出自 TENNFY WU,转载时请注明出处及相应链接。

本文永久链接: http://www.tennfy.com/1025.html

下一篇文章:

上一篇文章:

11人参与了讨论

  1. 无纯洁 说:

    技术文,不客气地收下了

  2. 攀峰网 说:

    怎么文章中的代码显示你这种格式啊?

  3. Youth.霖 说:

    话说我从来都不用可视化模式呢

  4. 地坛分享 说:

    不错,可否转走(保留原文地址) :mrgreen:

  5. 刘洋 说:

    博主的文章写的非常好,速度也很快,欢迎互访~ http://www.tao91.net/

  6. 我今天在页面里面添加html代码的时候,样式表我用span调用的,结果一保存页面,那个代码就变成空格代码了,不知道啥问题

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

5 + 4 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部