wordpress代码高亮插件 - WP-Syntax

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

WP-Syntax 代码书写格式

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

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

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

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

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

1WP-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' );
};

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/1356.html

(0)
上一篇 2016年10月11日 15:40
下一篇 2016年10月17日 16:49

相关推荐

  • wordpress通过数据库快速删除指定分录目录下的所有文章。

    今天我遇到了个糟心的事,就是我的另一个网站因为某些原因所有想全部删除掉所有的文章内容。但是如果一条一条去删的话可是个很大工作量。因为文章数量有上万篇。所以为了快速通过删除的方法,我选择了从数据进行删除...

    2021年11月1日
    0650
  • 关于给wordpress文章图片加上ALT利于SEO的方法

    alt是用来对网页上的图片进行描述,光标在图片上时显示的提示语即采用该标签实现。 从SEO优化和用户体验来看,ALT-代替属性都是必要的,其重要性主要有: 网页内容相关性是关键词优化的前提,搜索引擎认为,网页上的...

    2018年8月29日
    0310
  • WordPress常用的函数、方法汇总

    选择使用 WordPress来搭建博客,主要原因便在于 WordPress有较高的流行度,还有各种围绕其进行的开发的扩展功能应有尽有,基本上可以说我们在博客建设中所需的任何功能,都已有人想到并得到实现,让你不必在博客具体...

    2019年5月14日
    0371
  • wordpress搬家后更换域名批量操作数据的方法。

    WordPress大家都知道后台需要设置网站的默认网址,如果直接更换了域名的话,使用新的域名是无法登陆的。网上有很多文章,告诉大家可以修改MySQL数据库,或者修改WordPress的wp-config.php文件或function.php文件等,...

    2022年4月24日
    0460
  • 解决wordpress在nginx环境下设置自定义固定链接后跳转404的方法

    今天重新搭建了一个网站,然后自己的设置固定链接,可是没有想到设置好之后文章的内容就访问不了了。于是通过各种排除方法,终于弄明白了。 我用的是宝塔面板只需要将以下代码粘贴即可。 找到/usr/local/nginx/conf/...

    2018年2月1日
    0310
  • WordPress调用最新,随机,热门,指定分类代码汇总

    关于WP文章调用方法,包括调用最新,指定分类,随机,热文等代码,经测试,支持最新版Wordpress。 1调用最新文章 // 显示篇数和排除分类...

    2019年10月30日
    0290
  • WordPress的自定义栏目使用教程

    WordPress自定义栏目(字段)是对Wordpress文章属性一种拓展,一般写文章的时候,后台文章编辑只提供了文章的分类、作者、标签、时间等属性。而自定义栏目可以增加文章其它属性,例如:点赞数和浏览量。而这些属性字...

    2019年10月30日
    0290
  • WordPress如何去掉category链接

    WordPress默认分类目录链接会带有category , 为了链接扁平化,层级不超过三级,更有利于Seo优化,所以要删掉category层级。 在主题文件functions.php中加上下面代码即可。 //删除链接category目录 add_action( 'loa...

    2019年10月30日
    0280

发表评论

您的电子邮箱地址不会被公开。

您看到的还是重蔚自留地。只是我们升级啦!