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