zoukankan      html  css  js  c++  java
  • 高亮代码 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="js; toolbar:false; gutter:false; quick-code:true;">
    function helloSyntaxHighlighter()
    {
        return "hi!";
    }
    </pre>
    <pre class="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



  • 相关阅读:
    大数据方向招人难啊!!
    .netcore 急速接入第三方登录,不看后悔
    T-SQL——函数——时间操作函数
    T-SQL——关于XML类型
    机器学习方法
    可读性友好的JavaScript:两个专家的故事
    快速了解 JavaScript ES2019 的五个新增特性
    了解 Vue 的 Compsition API
    使用 JavaScript 操作浏览器历史记录 API
    JavaScript ES 模块:现代化前端编程必备技能
  • 原文地址:https://www.cnblogs.com/dfg727/p/3849109.html
Copyright © 2011-2022 走看看