Snippet jQuery Syntax Highlighter 是一个建立在SHJS的 开源插件,Snippet提供了简单而且快捷的方法,可以方便的为你带来高亮语法的提示.可以在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62中运行.

先简单为你讲一讲它的用法.在官方的网站也已经有了详细的介绍,这里就稍微翻译一下它所提供的例子.

1.  在你的HTML中加载Snippet和JQuery

1. <script type=”text/javascript” src=”js/jquery.js”></script>
2. <script type=”text/javascript” src=”js/jquery.snippet.js”></script>

2.  加载Snippet的CSS

1. <link rel=”stylesheet” type=”text/css” href=”css/jquery.snippet.css” />

3.  重点是这一步,我们要把下面的代码写在<script>标记中,让Snippet对<pre>标记进行操作

1. $(document).ready(function(){
2. $(“pre.htmlCode”).snippet(“html”);
3. // 找到类名为htmlCode的<pre>标签
4. // 并且以HTML语法来高亮显示它
5. $(“pre.styles”).snippet(“css”,{style:”greenlcd”});
6. // 找到类名为styles的<pre>标签
7. // 并且以CSS语法来高亮显示它
8. // 显示的类型为greenlcd
9. $(“pre.js”).snippet(“javascript”,{style:”random”,transparent:true,showNum:false});
10. // 找到类名为js的<pre>标签
11. //并且以JavaScript语法来高亮显示它
12. // 显示的类型为在39中随机选择
13. // 选择背景为透明
14. // 不显示行号
15. });

4.  可以动态更新你的Snippet

1. $(document).ready(function(){
2. $(“pre#dynamic”).snippet(“php”,{style:”navy”,showNum:false});
3. // 找到类名为js的<pre>标签并把类型选为navy
4. // 隐藏行号
5. $(“pre#dynamic”).click(function(){
6. $(this).snippet({style:”vampire”,transparent:true,showNum:true});
7. // 改变snippet的类型为vampire
8. // 改变背景为透明
9. // 显示行号
10. });
11. });

关于更多的参数可以在Snippet的网站的找到,这里就不多说了.总之Snippet是一个比较全面的而且很好用的显示高亮代码的插件,有兴趣的 话,你也可以下来试试.下载地址和例子点这里.