ueditor使用代码高亮的方法 SyntaxHighlighter 显示错位修复


ueditor支持代码高亮

1、页面引用以下资源文件(均位于ueditor目录中):

<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">

如果是在thinkcmf5(ThinkCMF 5.0.190111 正式版)中使用:

<script src="__STATIC__/js/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" />

2、增加如下js脚本使高亮生效:

SyntaxHighlighter.all();

3、大功告成!

4、可能会出现数字跟代码的错位情况

经过实验,修改css文件中关于td标签的padding值可以解决错位问题,原来的代码为:

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter,
.syntaxhighlighter td,
.syntaxhighlighter tr,
.syntaxhighlighter tbody,
.syntaxhighlighter thead,
.syntaxhighlighter caption,
.syntaxhighlighter textarea {
	-moz-border-radius: 0 0 0 0!important;
	-webkit-border-radius: 0 0 0 0!important;
	background: none!important;
	border: 0!important;
	bottom: auto!important;
	float: none!important;
	left: auto!important;
	line-height: 1.1em!important;
	margin: 0!important;
	outline: 0!important;
	overflow: visible!important;
	padding: 0!important;
	position: static!important;
	right: auto!important;
	text-align: left!important;
	top: auto!important;
	vertical-align: baseline!important;
	width: auto!important;
	box-sizing: content-box!important;
	font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
	font-weight: normal!important;
	font-style: normal!important;
	min-height: inherit!important;
	min-height: auto!important;
	font-size: 13px!important
}

需要将

padding: 0!important;

去掉!important,改为

padding: 0;

然后,单独为.syntaxhighlighter td添加一个padding-top:8px

.syntaxhighlighter td{
	padding-top: 8px
}

效果如本站所示效果。