高亮代码 SyntaxHighlighter

 

SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/download/

 

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Hello SyntaxHighlighter</title>

    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>

    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

    <script type="text/javascript" src="scripts/shCore.js"></script>

    <script type="text/javascript" src="scripts/shAutoloader.js"></script>

    <!--for html-script-->

    <script type="text/javascript" src="scripts/shBrushXml.js"></script>

    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>

    <!--for class-name-->

    <script type="text/javascript" src="scripts/shBrushCss.js"></script>

    

    <script type="text/javascript">

        function path()

        {

            var args = arguments,

                result = [];

                

            for(var i = 0; i < args.length; i++)

                result.push(args[i].replace('@', '/scripts/'));

                

            return result

        };



        SyntaxHighlighter.config.strings.help = "";        

        SyntaxHighlighter.config.strings.expandSource = "+ view code";

        /*

        SyntaxHighlighter.autoloader.apply(null, path(

            'applescript            @shBrushAppleScript.js',

            'actionscript3 as3        @shBrushAS3.js',

            'bash shell                @shBrushBash.js',

            'coldfusion cf            @shBrushColdFusion.js',

            'cpp c                    @shBrushCpp.js',

            'c# c-sharp csharp        @shBrushCSharp.js',

            'css                    @shBrushCss.js',

            'delphi pascal            @shBrushDelphi.js',

            'diff patch pas            @shBrushDiff.js',

            'erl erlang                @shBrushErlang.js',

            'groovy                    @shBrushGroovy.js',

            'java                    @shBrushJava.js',

            'jfx javafx                @shBrushJavaFX.js',

            'js jscript javascript    @shBrushJScript.js',

            'perl pl                @shBrushPerl.js',

            'php                    @shBrushPhp.js',

            'text plain                @shBrushPlain.js',

            'py python                @shBrushPython.js',

            'powershell ps posh        @shBrushPowerShell.js',

            'ruby rails ror rb        @shBrushRuby.js',

            'sass scss                @shBrushSass.js',

            'scala                    @shBrushScala.js',

            'sql                    @shBrushSql.js',

            'vb vbnet                @shBrushVb.js',

            'xml xhtml xslt html    @shBrushXml.js'

        ));

        */

        SyntaxHighlighter.all();

    </script>

</head>



<body style="background: white; font-family: Helvetica">

<div>toolbar:?</div>

<div>collapse: 折叠</div>

<div>gutter: 行号</div>

<div>first-line: 行号从多少开始</div>

<div>highlight 高亮行</div>

<div>html-script: 包含html、script  貌似要加载shBrushXml</div>

<div>quick-code: 双击复制</div>





<h1>Hello SyntaxHighlighter</h1>

<pre class="brush:js; toolbar:false; gutter:false; quick-code:true;">

function helloSyntaxHighlighter()

{

    return "hi!";

}

</pre>

<pre class="brush:js; html-script:true; collapse:true; highlight:[2,4]; first-line:2;">

function helloSyntaxHighlighter()

{

    return "hi!";

}

<div style="color:red;">test

</div>

</pre>

</html>
View Code

 



你可能感兴趣的:(highlighter)