beautyOfCode – jQuery 代码语法高亮插件

先来查看下效果

highlight_effect

1.beautyOfCode 是什么？

SyntaxHighlighter 是一个非常流行的代码高亮方案，世界上最流行的开源博客程序 WordPress 官方，以及众多基于 WordPress 搭建的第三方博客或网站都在使用。而 beautyOfCode 是基于 SyntaxHighlighter 的 jQuery 插件，它更好的兼容了XHTML。

2.为什么使用 beautyOfCode？

很多博客或 CMS 都支持通过插件来高亮代码语法，但这种方式会额外增加网站的性能消耗，而且，类似国内的 DEDECMS 却也要经过一番折腾；用一些提供在线代码着色的网站也是一个不错的方法，但同样有一些缺点，有额外增加一些乱七八糟的行业样式，并且不易修改。

3.如何使用 beautyOfCode ？

在需要的地方引入SyntaxHighlighter.css，shCore.js，jQuery以及所需要的一些代码语法笔刷文件。

引用的文件（以下事例只使用了 CSS 与 JS 笔刷）

<link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css">
<script src="shCore.js"></script>
<script src="shBrushJScript.js"></script>
<script src="shBrushCss.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<script src="jQuery.beautyOfCode.js"></script>

方案一：通过 JS 指定笔刷

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码高亮插件</title>
    <link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css">
</head>
<body>
<pre id="myCode1">
    <code>
        // js code
        $.beautyOfCode.init('clipboard.swf');
        $("#myCode").beautifyCode('javascript');
    </code>
</pre>
<pre id="myCode2">
    <code>
        // css code
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
        body,button,input,select,textarea {font:12px/1.5 "Microsoft YaHei",simsun,Arial,Helvetica,sans-serif;}
        h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
        table {border-collapse:collapse; border-spacing:0;}
        em {font-style:normal;}
        ul,ol {list-style:none;}
        a {text-decoration:none; color:#39442e;}
        a:hover {text-decoration:underline;}
        fieldset,img {border:0;}
        button,input,select,textarea {font-size:100%; border:0;}
        .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
        .clearfix {*zoom:1;}
    </code>
</pre>
<script src="shCore.js"></script>
<script src="shBrushJScript.js"></script>
<script src="shBrushCss.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<script src="jQuery.beautyOfCode.js"></script>
<script>
$(function(){
    $.beautyOfCode.init('clipboard.swf');
    $("#myCode1").beautifyCode('javascript');
    $("#myCode2").beautifyCode('css');
});
</script>
</body>
</html>

方案二：通过 HTML 指定笔刷（推荐）

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>代码着色：beautify all</title>
<link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css">
</head>
<body>
<pre class="code">
    <code class="javascript">
        <script>
            // mycode
            $(function(){
                $.beautyOfCode.init('clipboard.swf');
                $.beautyOfCode.beautifyAll();
            });
        </script>
    </code>
</pre>

<pre class="code">
    <code class="css boc-nocontrols">
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
        body,button,input,select,textarea {font:12px/1.5 "Microsoft YaHei",simsun,Arial,Helvetica,sans-serif;}
        h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
        table {border-collapse:collapse; border-spacing:0;}
        em {font-style:normal;}
        ul,ol {list-style:none;}
        a {text-decoration:none; color:#39442e;}
        a:hover {text-decoration:underline;}
        fieldset,img {border:0;}
        button,input,select,textarea {font-size:100%; border:0;}
        .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
        .clearfix {*zoom:1;}
    </code>
</pre>
<script src="shCore.js"></script>
<script src="shBrushJScript.js"></script>
<script src="shBrushCss.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<script src="jQuery.beautyOfCode.js"></script>
<script>
$(function(){
    $.beautyOfCode.init('clipboard.swf');
    $.beautyOfCode.beautifyAll();
});
</script>
</body>
</html>

使用第二种方案的优势很明显，那就是一劳永逸，可以结合 CMS 等使用。本文中只使用了 CSS 与 JS 笔刷，如果有需要，也可以到 SyntaxHighlighter 官网下载所需要的笔刷。

案例文件下载：Code_highlight.zip

参考文章：

beautyOfCode 项目博客：http://startbigthinksmall.wordpress.com/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/

SyntaxHighlighter官网：http://alexgorbatchev.com/SyntaxHighlighter/

posted @ 2013-04-15 17:55  Milly  阅读(1901)  评论(0)  编辑  收藏  举报