借用Snippet插件美化博客中的代码

书写博客，难免要贴出代码。然而直接贴出代码，则不美观。于是，应运而生出现了很多代码美化的插件。其中比较有名的是Syntax Highlighting插件。

笔者在网上翻阅的时候发现了Snippet插件，其支持众多的代码类的美化——例如：HTML、CSS、JS、C#等。并有39种不同的美化风格可供选择。

其官网地址：Snippet插件官网。在官网上，已经比较详细的介绍了插件的使用方法，这里就不在赘述了。

和许多美化插件一样，该插件是基于JQuery的，故在使用的时候，要先引用相关的文件，如下所示：

注意：由于在jquery.snippet.js中使用了代码$.browser.opera，而这个代码在JQuery 1.9版本中已经移除，故如果引用的是JQuery 1.9版本，则插件使用会不正常。因此，建议直接引用其官网上的JQuery 1.4版本。

那如何在自己的博客中使用Snippet插件呢？

首先，把需要用到的文件先上传到博客的后台

其次，在博客的页面中写引用插件的代码。

或者是统一在博客后台中的页面设置中统一引用，但这有一个副作用，就是每篇博客都会引用这几个文件（不管有用没用，都会引用，这些文件加起来也有近240K，对没用到这个插件的页面来说是个浪费，例如笔者之前的近百篇文章）

我们来看看Snippet插件是如何美化代码的

1、页面加载Snippet插件所需的文件（三个文件，大约240K）

2、调用插件的Snippet方法，美化PRE标签下的代码

3、对代码重新用HTML代码格式化（添加HTML标签，如li和span等），通过HTML代码调用相应的类来呈现美化好后的代码

但调用Snippet插件美化代码也有些副作用

1、需要调用外部文件，代码臃肿（三个文件240K）

2、我们看中的是美化后的结果，不在乎美化的过程。而调用插件，则每次浏览的时候都会执行美化的过程。

3、美化还不智能，只能针对一种类别进行美化，比如仅仅对HTML或者是JS美化。如果是包含JS代码的HTML页面，则美化的效果大打折扣。

那我们可以把美化好后的HTML代码段复制到我们的博客中，再引用相应的CSS文件，那既可以实现美化代码的作用，又避免引用Snippet插件的文件，还可以自己定制微调，实现完美美化包含JS代码的HTML页面。

于是，自己单独编写一个用Snippet插件来美化代码的页面。页面效果如下：

界面比较简陋，上部是一个文本框，中间是两个选项和一个按钮，下部分为两部分，一个是美化后的效果，一个是该效果对应的HTML代码。具体的该页面的HTML代码如下所示：（这个页面在IE下运行正常，但在Chrome下不能正常运行，是因为innerText么？）

注：Snippet插件一共有39种样式，这里是演示代码，只贴了4种选项，实际可以根据自己的喜好贴选项。在实际的页面中，我贴了15种选项。

我再把所需要的样式表直接添加在源代码里，因为本文所用的样式是Golden样式，故本文只贴了Snippet插件的基本样式和Golden样式。

上面的CSS代码中的绿色部分是我额外添加的，因为博客园中设置了一些CSS，破坏了Snippet插件美化后的效果，如增加了li元素的行间距，还有ul的左边距，以及增加了li元素的list-style属性（用了!important提高了优先级，我也只能用!important提升优先级，强制去掉li元素之前的列表样式）

实际使用下来，Snippet插件美化代码的效果还是不错的，但也有要完善的地方，例如在美化CSS中，碰到+-等符号美化就会出错，还得自己修正。

题外话：在贴样式的时候，不知是博客园的设置问题还是Windows Live Writer的问题，样式中的大写字母会被替换成小写字母，导致样式无效（浏览器认为是不同的样式，没法运用）。故在贴美化后的HTML代码时，把引用的CSS中的类大写改成小写。

本文是利用Snippet插件来美化我们的代码。如果，还有更好的建议，望不吝赐教。

    本文转自万仓一黍博客园博客，原文链接：http://www.cnblogs.com/grenet/p/3738462.html，如需转载请自行联系原作者