html代码高亮显示,js代码高亮显示

4554次浏览

引子

很多博客和论坛都有代码识别,代码高亮显示,那么这些代码高亮制作是如何完成的呢?其实代码高亮的方法有很多,网上随便搜搜,最起码能找到九种代码高亮的方法!下面我来介绍一种代码高亮的方法。那就是用syntaxhighlighter这个插件。

案例介绍

下面请看我用syntaxhighlighter写的一个demo吧!

案例请查看

上面案例中的代码已经高亮显示,那么这是如何制作的呢?

案例代码

html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
        <script class="jquery library" src="js/sandbox/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/scripts/brush.js"></script>
<link type="text/css" rel="stylesheet" href="js/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="js/styles/shThemeDefault.css"/>
    </head>
    <body>
    <h1>
      代码高亮演示 SyntaxHighlighter
    </h1>
        <pre class='brush: javascript'>
    @haorooms
$(document).ready(function(){
    SyntaxHighlighter.config.clipboardSwf = 'clipboard.swf';//加载swf
    SyntaxHighlighter.all();
});


      </pre>
    </body>
</html>

js代码:

$(document).ready(function(){
    SyntaxHighlighter.config.clipboardSwf = 'clipboard.swf';
    SyntaxHighlighter.all();
});

syntaxhighlighter下载地址

https://code.google.com/p/syntaxhighlighter/downloads/detail?name=SyntaxHighlighter_1.5.1.rar&can=2&q=

Tags: htmljs

相关文章: