本文介绍Snippet插件用于美化代码的方法，包括配置步骤及注意事项，并分享了一个实战页面的搭建过程，展示了不同代码类型的美化效果。
书写博客，难免要贴出代码。然而直接贴出代码，则不美观。于是，应运而生出现了很多代码美化的插件。其中比较有名的是Syntax Highlighting插件。
笔者在网上翻阅的时候发现了Snippet插件，其支持众多的代码类的美化——例如：HTML、CSS、JS、C#等。并有39种不同的美化风格可供选择。
其官网地址：Snippet插件官网。在官网上，已经比较详细的介绍了插件的使用方法，这里就不在赘述了。
和许多美化插件一样，该插件是基于JQuery的，故在使用的时候，要先引用相关的文件，如下所示：
- <link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.snippet.js"></script>
注意：由于在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么？）
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Snippet</title>
- <link href="CSS/jquery.snippet.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="JS/jquery.min.js"></script>
- <script type="text/javascript" src="JS/jquery.snippet.js"></script>
- </head>
- <body>
- <p>
- <textarea cols="100" rows="20" name="Code"></textarea>
- </p>
- <p>
- <input type="button" name="button" id="button" value="美化代码" onclick="F();" />
- ，类别：
- <select name="select" id="select">
- <option value="html">HTML</option>
- <option value="css">CSS</option>
- <option value="JavaScript">JavaScript</option>
- </select>
- ，样式：
- <select name="select2" id="select2">
- <option value="bright">bright</option>
- <option value="golden">golden</option>
- <option value="navy">navy</option>
- <option value="whatis">whatis</option>
- <option value="random" selected="selected">random</option>
- </select>
- </p>
- <div id="C" style="width: 600px; word-wrap: break-word;">
- <pre id="FormatCode"></pre>
- </div>
- <div id="D" style="background-color: #EEF7A6">
- </div>
- </body>
- <script>
- function F() {
- var S = Code.value;
- document.getElementById("C").innerHTML = '<pre id="FormatCode"></pre>';
- document.getElementById("FormatCode").innerText = S;
- var V1, V2;
- V1 = select.value;
- V2 = select2.value;
- $("pre#FormatCode").snippet(V1, { style: V2, transparent: false, showNum: false });
- document.getElementById("D").innerText = document.getElementById("C").innerHTML;
- }
- </script>
- </html>
扫一扫
2009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
