总体而言,代码高亮都是藉由SyntaxHighlighter实现的,官方网站:
http://alexgorbatchev.com/SyntaxHighlighter/
不过不知道为什么,似乎我的一装上就会排版错乱,虽然高亮效果出来了但却很难看,然后到BEN-Lab去找了一个刚好合适(PS:=、=不还是低版本的SyntaxHighlighter,还是现有版本号除以二……)
在WP插件里也有藉由此实现的代码高亮(依旧= =凌乱……)
不过高版本多样式任你挑选啊。官方安装方法这里都有,但……鸟语鸭梨很大:http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
这里介绍一下低版本的好了=、=|||来自:http://ben-lab.com/tech/1506.html
首先下载文件:code.zip
然后上传到文件夹(各种随意)比如新建code文件夹上传(我这里上传到又拍云……鉴于网站速度还可以就不把JS全搬过去了=、=只不过这里还有图……咳咳所以……)
然后在header或者footer里增加代码:
请把网址改成你自己的,谢谢= =、、
然后的然后,如果你需要放代码,就用这个格式调用
代码
当然,不知道为什么,那里没有提到更多样式,其实通过class我们可以用很多不同的功能。
brush:语言 collaspe:代码是否折叠 wrap-lines:自动换行 toolbar:就是print之类的是否显示 auto-links:对超链接处理 gutter:行号显示(我猜的……) 2013年02月08日补充: 在shThemeDefault.css第一行即 .syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;} 中追加一个 word-wrap: break-word; 可阻止代码溢出 * * * 当然这样你可能觉得烦了,这里推荐WLW插件一枚辅助你使用这个代码: [http://plugins.live.com/writer/detail/syntax-higlighter-20-for-windows-live-writer](http://plugins.live.com/writer/detail/syntax-higlighter-20-for-windows-live-writer) 试了一下有的都不适合这个版本,这个可以完美结合。(但是我没有搞懂一个默认text要什么高亮=、=),但是他无法记住你上次贴的语言……默认一直都text。 [](https://img.codesky.me/upload/2012/08/2012-08-20_082337.png)[](https://img.codesky.me/upload/2012/08/2012-08-20_082436.png) 如果你粘帖错了,还支持再次编辑,以及我所说的一些属性的选择。 忘了说明,这里压缩包的默认样式为: [](https://img.codesky.me/upload/2012/08/2012-08-20_082555.png) 我把它修改为: [](https://img.codesky.me/upload/2012/08/2012-08-20_082641.png) 以适应主题的风格(而且我发现弄巧成拙颜色正好和无高亮匹配=、=如果颜色太多的话会审美疲劳——这个道理我初中才懂=、=) shThemeDefault.css主要是背景 shCore.css 主要是高亮 但那段虚线是在shCore.css中的,总之 用拾色器准没错!(嗯 配上自己很久以前扒的配色表) * * * 然后,还有一款我一直用的WLW插件,也很好用,通过文本框来实现代码高亮(个人觉得亮的还不错) [](https://img.codesky.me/upload/2012/08/2012-08-20_083043.png) 功能同样很多很好很强大,缺点是不可在编辑……: [](https://img.codesky.me/upload/2012/08/2012-08-20_083142.png)[](https://img.codesky.me/upload/2012/08/2012-08-20_083201.png) 这个不需要你追加任何多余的代码。 * * * 最后,还有一款软件CodeRender可以提供代码高亮的功能,也是很好用的,就是软件老了点……08年的(我相信和第一种代码差不多时间= =),官方博客似乎已经挂了…… 首先[下载软件](https://img.codesky.me/download/CodeRender.rar)(点击你们懂的),软件比代码高亮的第一种小,真是意想不到(于是我上传在又拍云了……) 依旧有CSS可供编辑。 [](https://img.codesky.me/upload/2012/08/2012-08-20_083954.png) \- -功能还是雷同,同时提供实时浏览。 如果你需要在线代码高亮请至:[http://www.iyuyue.com/project/CodeRender/](http://www.iyuyue.com/project/CodeRender/) (同原理实现可通用) 使用时需要引入 支持语言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi. 相信有在线和软件的支持,也很适合随时随地使用。 至于那个发芽网,我只能用坑爹来形容了…… 好吧应该就是这么点了╮( ̄▽ ̄")╭ * * * 忘了补充,Wordpress会把半角转为全角 "转换为” 所以…… wp-includes-formatting.php找到123行- -算了还是说那个吧…… // This is not a tag, nor is the texturization disabled static strings 将后面的 $curl = str\_replace($static\_characters, $static\_replacements, $curl); 以及后两行的 $curl = preg\_replace($dynamic\_characters, $dynamic\_replacements, $curl); 注释掉(前面加//) 完毕~什么时候需要这么和谐的功能去掉注释就好了 * * * 更新:鉴于俺对鸟语深表蛋疼 BEN-LAB更新之后- -直接Copy过来(本区域内容未经测试……求测试啊亲们) #### SyntaxHighlighter.config 全局配置,不支持单个代码块的调整在刚才放footer的代码下面接着,像这样设置 SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); #### SyntaxHighlighter.defaults 单个调节
名称
默认值
介绍
bloggerMode
false
如果博客在blogger托管,就必须把这个设为true
strings
Object
官方介绍说“允许您更改默认的消息,在这里看到更多细节”
stripBrs
false
设为true可以自动去掉代码里的<br/>标签
tagName
"pre"
更改自动识别的标签,如果改成p就会识别段落里的代码
1.全局调整:方法同上 SyntaxHighlighter.defaults\['gutter'\] = false; SyntaxHighlighter.defaults\['smart-tabs'\] = false; SyntaxHighlighter.all(); 2.单个调整:标签添加属性 那么,请参考文章最初的解释了
名称
默认值
介绍
auto-links
true
自动给代码里的网址加链接(默认已打开)
class-name
' '
定义CSS,详细看DEMO
collapse
false
设为true自动收缩代码块,点击才打开
first-line
1
设定第一行的的行号,如果设为10即行号从10开始
gutter
true
打开或关闭行号显示
highlight
null
例子:设定[2,3],可以高亮2和3行。设定4,单独高亮第4行
html-script
false
这个可以让代码块里面的HTML代码不执行,前提是要特别下载一个shBrushXml.js并载入。请自行到官网找。
smart-tabs
true
谁可以告诉我这货用来作甚!(小天:目测是智能排列我会说么)
tab-size
4
更改空格的宽度
toolbar
true
开关工具栏,就是右上角那个