空の領域

又一个坑爹的神站 大人說:要清爽 要低調

0%

代码高亮代码版+WLW插件+软件

总体而言,代码高亮都是藉由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就会识别段落里的代码

在刚才放footer的代码下面接着,像这样设置 SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); #### SyntaxHighlighter.defaults 单个调节

名称

默认值

介绍

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

开关工具栏,就是右上角那个

1.全局调整:方法同上 SyntaxHighlighter.defaults\['gutter'\] = false; SyntaxHighlighter.defaults\['smart-tabs'\] = false; SyntaxHighlighter.all(); 2.单个调整:标签添加属性 那么,请参考文章最初的解释了

欢迎关注我的其它发布渠道