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

发布时间：2018-04-01作者：laosun阅读（3476）

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内超链接不可点击那么如下所示：

所有刷子

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>

效果图：

但是经过博主测试，代码长了以后不会强制换行，所以先是修改了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()
});