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
}
效果如本站所示效果。