SyntaxHighLighter代码高亮的在线工具+代码方法
前言
[v_organge]代码高亮的方法有很多,今天云落介绍一个基于SyntaxHighLighter的代码高亮方法,其实很简单,主要就是基于浏览器用样式给代码进行着色[/v_organge]
第一步
首先进入这个代码高亮在线工具
http://gaoliang.lanbing.org/my.php
选择一个自己喜欢的样式,比如我选的就是MDUltra样式,为了加快速度,我们最好把这个样式文件下载到本地,反正我是下载了
< link rel = 'stylesheet' type = 'text/css' href = 'http://gaoliang.lanbing.org/styles/shCoreDefault.css' /> |
将这个样式链接放在single.php里面,具体链接换成你自己的。样式方面就OK了。
第二步
进入在线工具网站,将代码贴进去,选择语言,选择生成HTML,因为行号有点问题,所以不要选,然后选择自己的代码样式,然后高亮。
第三步
全选自动生成的HTML,然后粘贴在WordPress编辑框,就可以了。 😛
最后效果
PHP
//fancybox图片灯箱效果 add_filter( 'the_content' , 'fancybox' ); function fancybox ( $content ) { global $post ; $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>(.*?)</a>/i" ; $replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>' ; $content = preg_replace( $pattern , $replacement , $content ); return $content ; } |
javascript
document.onmouseup = function (event) { if (event.which !== 1) { return ; } if (GetOpt( 'Ctrl_st' ) && !event.ctrlKey) { return ; } popData.lxe = event; return setTimeout(ShowBar, 10); }; |
CSS
/* AGENT_SHEET */ /*----- SITES TO EXCLUDE -----*/ @-moz-document regexp( "https?://(?!(www.your.sites.here.com|forum.example.com)).*" ), url-prefix(ftp://), url-prefix(about), url-prefix(javascript) { html { background : /***** COPY AND PASTE THE URL OF YOUR BACKROUND-IMAGE INSIDE THE "": *****/ |
后语
这种方法好处就是完全基于浏览器,和服务器没啥关系,任何程序都能用,缺点嘛,很明显,添加的代码比较多。
-- 完 --