ueditor 代码高亮 - 基本调用
Hello!
如果觉得不错的话,并且不吝转载时,请顺便添加上这篇文章的链接
https://www.hi-ruby.com/posts/1012
hi-ruby这回重写,后台使用了一直想使用的ueditor, 之前公司用的在ie下弹出层有问题就拿下了,这回就不考虑ie的问题了
ueditor自带代码高亮的功能,但是前台还需要自己写入, 其实灰常简单,按照ueditor的说明做下去就ok了
说明就在ueditor压缩包里_examples/highlightDemo.html中
导入包:
<!--加入高亮的js和css文件,如果你的编辑器和展示也是一个页面那么高亮的js可以不加载-->
<script type="text/javascript" charset="utf-8" src="../third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="../third-party/SyntaxHighlighter/shCoreDefault.css"/>在页面调用一下js代码如下:
//为了在编辑器之外能展示高亮代码
SyntaxHighlighter.highlight();
//调整左右对齐
for(var i=0,di;di=SyntaxHighlighter.highlightContainers[i++];){
var tds = di.getElementsByTagName('td');
for(var j=0,li,ri;li=tds[0].childNodes[j];j++){
ri = tds[1].firstChild.childNodes[j];
ri.style.height = li.style.height = ri.offsetHeight + 'px';
}
}
