文档章节

WordPress代码高亮插件:WP-Syntax

西西爱OS
 西西爱OS
发布于 2012/10/20 09:50
字数 827
阅读 200
收藏 0

WordPress代码高亮插件有很多,如WP-CodeBox 、WP-Syntax。但使用 Windows Live Writer  (简称 WLW )发布含有代码的文章,代码都会被转义,需要进入WordPress后台的Html模式下重新编辑代码,很是麻烦。搜索得知,要防止转义,可以添加 escaped="true" 属性,经过测试,发现 WP-CodeBox 插件不支持 escaped="true" 属性,但WP-Syntax就支持。

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

更多相关:PHP教程

WP-Syntax 代码书写格式

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

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

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

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

'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 的代码

.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文件,这样,即使你以后升级了插件,也能保留你自己的样式。

if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {
remove_action( 'wp_print_styles', 'wp_syntax_style' );
};

© 著作权归作者所有

西西爱OS
粉丝 16
博文 70
码字总数 52874
作品 0
杭州
私信 提问
10 个 WordPress 的代码语法高亮插件

1. Developer Formatter 该插件使用 GeSHi 高亮引擎,支持超过110种语言,包括 PHP, ASP, Html, JavaScript, CSS, Java, Python, Delphi, C++, C, Visual Basic 等 2. WordPress Plugin – ......

红薯
2012/02/27
25.5K
10
5 个代码语法着色的 WordPress 插件

程序员的博客,贴代码是必不可少的,语法着色可以让代码看起来更养眼,下面是 5 个 WordPress 的插件,用来对代码进行语法高亮显示。 1) CodeColorer 该插件允许在写文章时插入代码,支持多种...

红薯
2011/11/03
4.2K
7
WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件。在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有...

Surjur
2015/04/30
4.1K
1
jquery博客终于找到适合的代码插件啦WP Code Highlight

jquery开博客也快2个月多了,主要是写点WEB前端这块的平时常用的效果啥的。 正因为如此,有个好的代码插件,那可是一大利器啊,不然那么多代码放那太多不利于浏览。 试过几个代码插件,比如S...

天外飘雪
2012/09/22
147
0
怎么选择wordpress 编辑器

最近wordpress刚建立起来,发表文章的时候顿感压力山大,默认编辑器TinyMCE,功能少的可怜啊。下面我就把我这几天找到的编辑器做一个统计好了,顺便说下这几天的感受。 TinyMCE: 不过网友们已...

ShareYkuaile
2014/12/18
6K
1

没有更多内容

加载失败,请刷新页面

加载更多

Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
33分钟前
4
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
39分钟前
5
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
50分钟前
5
0
提炼问题域

2.1 知识提炼与协作 知识提炼是从问题域中提炼出相关信息的技术,其目的是构建能够满足业务用例需求的有用模型。 知识提炼是为技术团队在基于一组需求为问题域设计解决方案时弥补所欠缺的知识...

细节探索者
59分钟前
5
0
redis是单线程,为什么那么快

完全基于内存,绝大部分请求是纯粹的内存操作,非常快速。 数据结构简单,对数据操作也简单,Redis 中的数据结构是专门进行设计的。 采用单线程,避免了不必要的上下文切换和竞争条件,也不存...

DustinChan
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部