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

来源：互联网发布：单片机创意设计编辑：程序博客网时间：2024/06/05 04:38

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

SyntaxHighlighter的简单实例

一、SyntaxHighlighter的代码流程如下

1、Add base files to your page: shCore.js and shCore.css2、Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)3、Include shCore.css and shThemeDefault.css4、Create a code snippet with either <pre /> or <script /> method5、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>

三、显示的效果如下所示

具体的一些配置情况，可以参考：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">

替换后显示的效果如下：

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

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

　　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@'    }},

友情链接

阅读全文

0 0