全屏浏览
缩小浏览
回到页首

JS插件---->SyntaxHighlighter的使用

SyntaxHighlighter是一款用于web页面的代码着色工具，可以用来着色多种语言。今天我们通过实例来学习一下它的用法。旧同桌不是老情人，但与你分享过的青春不比初恋少半分。

SyntaxHighlighter的简单实例

一、SyntaxHighlighter的代码流程如下

1、Add base files to your page: shCore.js and shCore.css

2、Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)

3、Include shCore.css and shThemeDefault.css

4、Create a code snippet with either <pre /> or <script /> method

5、Call SyntaxHighlighter.all() JavaScript method

使用的方式可以参考文档：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

jar包的下载地址： https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83


二、建立一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css">
    <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeDefault.css">
</head>
<body>
    <pre name="code" class="brush: java">
        public class Person {

        }
    </pre>
    <pre name="code" class="brush: js; gutter: false;">
        function foo() {
            var i = 3;
        }
    </pre>
    <pre class="brush: java; collapse: true;">
        public void javaMethod() {
            int i = 3;
        }
    </pre>
    <script type="syntaxhighlighter" class="brush: js">
        <![CDATA[
      /**
       * SyntaxHighlighter
       */
          function foo() {
              if (counter <= 10)
                  return;
              // it works!
          }
        ]]>
    </script>
    <script type="text/javascript" src="../third/SyntaxHighlighter/js/XRegExp.js"></script>
    <script type="text/javascript" src="../third/SyntaxHighlighter/js/shCore.js"></script>
    <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJava.js"></script>
    <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJScript.js"></script>
    <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushSql.js"></script>
    <script type="text/javascript">
        SyntaxHighlighter.all()
    </script>
</body>
</html>

三、显示的效果如下所示

img

具体的一些配置情况，可以参考：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

如果要换一种主题，可以在html中替换到默认的主题。比如使用shThemeRDark。

<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css">
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeRDark.css">

替换后显示的效果如下：

img

至于动态的通过代码来实现切换主题功能，不知道框架的代码中有没有配置。后续再做补充


四、关于其它的一些的问题

SyntaxHighlighter lets you build a single .js file that will include the core, CSS theme and the syntaxes that you wish to use.就是说通过工具的构建，可以将SyntaxHighlighter 一些需要在项目中引入的js, css打包成一个js文件。

链接：https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building

以下是一些默认的配置和设置，可以在代码中修改。

/**
 * 1、整体可以修改默认的设置：SyntaxHighlighter.config.attrName，SyntaxHighlighter.highlight.attrName。
 * 2、也可以上述所使用的那样，在html中修改属性值。<pre name="code" class="brush: js; gutter: false;">
 */
defaults : {
    /** Additional CSS class names to be added to highlighter elements. */
    'class-name' : '',
    
    /** First line number. */
    'first-line' : 1,
    
    /**
     * Pads line numbers. Possible values are:
     *
     *   false - don't pad line numbers.
     *   true  - automaticaly pad numbers with minimum required number of leading zeroes.
     *   [int] - length up to which pad line numbers.
     */
    'pad-line-numbers' : false,
    
    /** Lines to highlight. */
    'highlight' : null,
    
    /** Title to be displayed above the code block. */
    'title' : null,
    
    /** Enables or disables smart tabs. */
    'smart-tabs' : true,
    
    /** Gets or sets tab size. */
    'tab-size' : 4,
    
    /** Enables or disables gutter. */
    'gutter' : true,
    
    /** Enables or disables toolbar. */
    'toolbar' : true,
    
    /** Enables quick code copy and paste from double click. */
    'quick-code' : true,
    
    /** Forces code view to be collapsed. */
    'collapse' : false,
    
    /** Enables or disables automatic links. */
    'auto-links' : true,
    
    /** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */
    'light' : false,
    
    'html-script' : false
},

config : {
    space : '&nbsp;',
    
    /** Enables use of <SCRIPT type="syntaxhighlighter" /> tags. */
    useScriptTags : true,
    
    /** Blogger mode flag. */
    bloggerMode : false,
    
    stripBrs : false,
    
    /** Name of the tag that SyntaxHighlighter will automatically look for. */
    tagName : 'pre',
    
    strings : {
        expandSource : 'expand source',
        help : '?',
        alert: 'SyntaxHighlighter\n\n',
        noBrush : 'Can\'t find brush for: ',
        brushNotHtmlScript : 'Brush wasn\'t configured for html-script option: ',
        
        // this is populated by the build script
        aboutDialog : '@ABOUT@'
    }
},

posted @ 2017-09-12 18:50  huhx  阅读(3837)  评论(0)  编辑  收藏  举报