总体而言,代码高亮都是藉由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。 [![2012-08-20_082337](images/2012-08-20_082337_thumb.png "2012-08-20_082337")](https://img.codesky.me/upload/2012/08/2012-08-20_082337.png)[![2012-08-20_082436](images/2012-08-20_082436_thumb.png "2012-08-20_082436")](https://img.codesky.me/upload/2012/08/2012-08-20_082436.png) 如果你粘帖错了,还支持再次编辑,以及我所说的一些属性的选择。 忘了说明,这里压缩包的默认样式为: [![2012-08-20_082555](images/2012-08-20_082555_thumb.png "2012-08-20_082555")](https://img.codesky.me/upload/2012/08/2012-08-20_082555.png) 我把它修改为: [![2012-08-20_082641](images/2012-08-20_082641_thumb.png "2012-08-20_082641")](https://img.codesky.me/upload/2012/08/2012-08-20_082641.png) 以适应主题的风格(而且我发现弄巧成拙颜色正好和无高亮匹配=、=如果颜色太多的话会审美疲劳——这个道理我初中才懂=、=) shThemeDefault.css主要是背景 shCore.css 主要是高亮 但那段虚线是在shCore.css中的,总之 用拾色器准没错!(嗯 配上自己很久以前扒的配色表) * * * 然后,还有一款我一直用的WLW插件,也很好用,通过文本框来实现代码高亮(个人觉得亮的还不错) [![2012-08-20_083043](images/2012-08-20_083043_thumb.png "2012-08-20_083043")](https://img.codesky.me/upload/2012/08/2012-08-20_083043.png) 功能同样很多很好很强大,缺点是不可在编辑……: [![2012-08-20_083142](images/2012-08-20_083142_thumb.png "2012-08-20_083142")](https://img.codesky.me/upload/2012/08/2012-08-20_083142.png)[![2012-08-20_083201](images/2012-08-20_083201_thumb.png "2012-08-20_083201")](https://img.codesky.me/upload/2012/08/2012-08-20_083201.png) 这个不需要你追加任何多余的代码。 * * * 最后,还有一款软件CodeRender可以提供代码高亮的功能,也是很好用的,就是软件老了点……08年的(我相信和第一种代码差不多时间= =),官方博客似乎已经挂了…… 首先[下载软件](https://img.codesky.me/download/CodeRender.rar)(点击你们懂的),软件比代码高亮的第一种小,真是意想不到(于是我上传在又拍云了……) 依旧有CSS可供编辑。 [![2012-08-20_083954](images/2012-08-20_083954_thumb.png "2012-08-20_083954")](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 全局配置,不支持单个代码块的调整
名称 | 默认值 | 介绍 |
bloggerMode | false | 如果博客在blogger托管,就必须把这个设为true |
strings | Object | 官方介绍说“允许您更改默认的消息,在这里看到更多细节” |
stripBrs | false | 设为true可以自动去掉代码里的<br/>标签 |
tagName | "pre" | 更改自动识别的标签,如果改成p就会识别段落里的代码 |
名称 | 默认值 | 介绍 |
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 | 开关工具栏,就是右上角那个 |