SyntaxHighlighter 高亮显示,搭配ueditor富文本编辑器使用!

发布时间:2018-04-01作者:laosun阅读(1334)

SyntaxHighlighter

SyntaxHighlighter高亮显示,具体的配置基本信息,以及官方支持的几种配置,解决了强制换行,行号错乱的问题。去除了代码中的超链接

    SyntaxHighlighter是一款用于web页面的代码高亮着色工具,可以用来着色多种语言,能让你的代码在网页上以类似IDE编辑器里的样子高亮关键字,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。 

    它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML 。 

    对于技术类的博客来说,这种语法高亮插件是必不可少的。


    参数有:

    参数名默认值描述

    bloggerModefalse    博客集成模式,如果你托管在blogger.com上面就必须将其设为true

    stringsObject允许你修改默认的工具信息 

    stripBrsfalse如果你的代码中在每行的末尾加上了 换行标签,那么这个参数就允许你忽略掉这个换行

    tagName"pre"设置哪类标签下的代码高亮

    2、SyntaxHighlighter.defaults

    为页面中的每个高亮元素设置默认参数,代码如下:

    SyntaxHighlighter.defaults['gutter'] = false;

    SyntaxHighlighter.defaults['smart-tabs'] = false;

    ...

    SyntaxHighlighter.all();

    参数列表:

    参数名默认值描述

    auto-links    如果将其设为true,那么高亮代码里面的链接将会变成可点击,反之不可点击

    class-name    允许我们为自己的高亮代码添加一个或多个样式.

    collapse 如果设置成true,那么代码部分就会强制折叠起来,点击即可展开.

    first-line    1允许我们设置开始的行号

    gutter    true允许我们关闭和打开代码前面的行号显示.

    highlight    null允许我们高亮显示整行来引起注意.可以是一个数字或数组。

    html-script    false允许我们高亮显示HTML/XML和脚本的混合代码.这个是比较常用的,在之前还需引用 shBrushXml.js文件

    smart-tabs    true是否智能缩进.

    tab-size    4设置制表符的尺寸 

    toolbar    true设置右上方工具栏的打开和关闭.

    3、Parameters

    这种方式允许我们将参数以键值对的形式写在 pre 标签的 class 属性中,代码:

    <pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

    比如:不允许pre内超链接不可点击那么如下所示:

    <pre class="brush:java; toolbar: false; auto-links: false;">...</pre>

    所有刷子

    SyntaxHighlighter 采用单独的语法文件称为刷子,我们需要用不同的刷子来高亮显示不同的代码语言,这里基本上包含了时下流行的所有语言,需要标记什么语言我们就引用不同的刷子文件,然后将 pre 标签标记为刷子别名。以下是所有的刷子:

    Brush name Brush aliases File name
    ActionScript3 as3, actionscript3 shBrushAS3.js
    Bash/shell bash, shell shBrushBash.js
    ColdFusion cf, coldfusion shBrushColdFusion.js
    C# c-sharp, csharp shBrushCSharp.js
    C++ cpp, c shBrushCpp.js
    CSS css shBrushCss.js
    Delphi delphi, pas, pascal shBrushDelphi.js
    Diff diff, patch shBrushDiff.js
    Erlang erl, erlang shBrushErlang.js
    Groovy groovy shBrushGroovy.js
    JavaScript js, jscript, javascript shBrushJScript.js
    Java java shBrushJava.js
    JavaFX jfx, javafx shBrushJavaFX.js
    Perl perl, pl shBrushPerl.js
    PHP php shBrushPhp.js
    Plain Text plain, text shBrushPlain.js
    PowerShell ps, powershell shBrushPowerShell.js
    Python py, python shBrushPython.js
    Ruby rails, ror, ruby shBrushRuby.js
    Scala scala shBrushScala.js
    SQL sql shBrushSql.js
    Visual Basic vb, vbnet shBrushVb.js
    XML xml, xhtml, xslt, html, xhtml shBrushXml.js

    官方或者其他渠道下载syntaxhighlighter,内包含scripts和styles文件夹,直接导入项目,引入js和css即可使用。

    博主是这么设置的,很简单;

    <!-- 代码高亮 -->
    <link rel="stylesheet" type="text/css" href="${ctx!}/assets/plugins/syntaxhighlighter/styles/shCoreEclipse.css">  
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shCore.js"></script>  
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="${ctx!}/assets/plugins/syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript">
    SyntaxHighlighter.defaults['auto-links'] = false;
    SyntaxHighlighter.defaults['quick-code'] = false;
    SyntaxHighlighter.all();
    </script>

    效果图:

    image.png

    但是经过博主测试,代码长了以后不会强制换行,所以先是修改了css(以下步骤是博主记忆的东西,可能有些不齐全,但是最主要的还是js设置行号)

    .syntaxhighlighter .line {
        white-space: pre !important; /*去掉*/
    }
    .syntaxhighlighter table td.code .line {
        padding: 0 1em !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    设置完成后发现确实换行,但是行号对不上,那么博主也是网上找了这么一段js代码,发现还是挺好用的。

    $(function() {
        var shLineWrap = function() {
        $(".syntaxhighlighter").each(function() {
            var $sh = $(this),
            $gutter = $sh.find("td.gutter"),
            $code = $sh.find("td.code");
            $gutter.children(".line").each(function(i) {
                var $gutterLine = $(this),
                $codeLine = $code.find(".line:nth-child(" + (i + 1) + ")");
                var height = $codeLine.height() || 0;
                if (!height) {
                    height = "auto"
    	    } else {
                    height = height += "px"
                }
                $gutterLine.attr("style", "height: " + height + " !important");
                    console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine)
                })
            })
        };
        var shLineWrapWhenReady = function() {
            if ($(".syntaxhighlighter").length === 0) {
                setTimeout(shLineWrapWhenReady, 10)
            } else {
                shLineWrap()
            }
        };
        shLineWrapWhenReady()
    });


1 +1

版权声明

 jquery  前端  源码

 请文明留言

0 条评论