代码美化SyntaxHighlighter,安装笔记

什么是syntaxhighlighter??

syntaxhighlighter 就是 wordpress 的一个代码高亮插件。

wordpress的官方地址:http://wordpress.org/extend/plugins/syntaxhighlighter/

因为经常要贴一下代码上来,所以就想弄个代码高亮显示,这样也方便自己查看这些代码。下面是安装过程中遇到的几个问题,记录一下。(参考了网上的一些文章)

  1. SyntaxHighlighter在Chrome浏览器下显示垂直滚动条的解决方法

    这个问题,只要改一下插件文件夹下shCoreDefault.css中的样式就可以解决,文件的路径是:wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCoreDefault.css (版本是:1.7.3 版,不同版本可能有些差异)

    将以下内容:

     .syntaxhighlighter {
         width: 100% !important;
         margin: 1em 0 1em 0 !important;
         position: relative !important;
         overflow: auto !important;
         font-size: 1em !important;
     }
    

    替换为

     .syntaxhighlighter {
         width: 100% !important;
         margin: 1em 0 1em 0 !important;
         position: relative !important;
         overflow-x: auto !important; /*这里是修改过的地方*/
         overflow-y: hidden !important;/*这里是修改过的地方*/
         font-size: 1em !important;
     }
    
  2. 设置代码的隔行变色

    修改wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css 文件,内容如下:

     .syntaxhighlighter .line.alt1 {
         background-color: #EEE !important;/*这个表示奇数行颜色*/
     }
     .syntaxhighlighter .line.alt2 {
         background-color: white !important;/*这个表示偶数行颜色*/
     }
    
  3. 设置autoloader
    必须加载的三个文件:

    • syntaxhighlighter/scripts/shCore.js
    • syntaxhighlighter/scripts/shAutoloader.js
    • syntaxhighlighter/styles/shCoreDefault.css

    $(document).ready(function() {
    function path()
    {
    var args = arguments,
    result = []
    ;
    for(var i = 0; i < args.length; i++)
    result.push(args[i].replace('@', '/js/syntaxhighlighter/'));
    return result;
    };

     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', 
       '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(); 
    

    });

  4. 显示参数设置

    default能够控制的值有下面这些:

     Name          Value   Description
     `auto-links`  true    自动探测超文本连接并且使得它能够点的动. Click here for a demo.
     `class-name`  ''      为高亮显示的部分设定自己定义的css class. Click here for a demo.
     `collapse`    false   设置高亮代码默认为合起来,就是加载进来的时候代码是合起来的. Click here for a `demo.first-line`  1   修改开始的行. Click here for a demo.
     `gutter`      true    设定上下滚动条是否出来. Click here for a demo.
     `highlight`   null    高亮显示某一行或者某几行. Click here for a demo.
     `html-script` false   设置是否高亮显示html/xml代码. Click here for a demo.
     `smart-tabs`  true    Allows you to turn smart tabs feature on and off. Click here for a demo.
     `tab-size`    4   Allows you to adjust tab size. Click here for a demo.
     `toolbar true`    Toggles toolbar on/off. Click here for a demo.
    
  5. 自动换行的实现(行号会增加,不实用)

    首先设置参数,为自动换行:

    SyntaxHighlighter.defaults['wrap-lines'] = true;

    然后修改CSS文件,在shCore.css中找到

     .syntaxhighlighter .line {
       white-space: pre !important;
     }
    

    注释掉即可

     /*white-space: pre !important;*/
    

参考:

http://alex.7enet.com/syntaxhighlighter%E5%AE%89%E8%A3%85%E7%AC%94%E8%AE%B0/

http://www.vcandou.com/post/222

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏