网站地图    收藏   

主页 > 前端 > 网页编辑器 >

kindeditor如何显示代码高亮

来源:未知    时间:2015-10-23 15:55 作者:xxadmin 阅读:

[导读] kindeditor如何显示代码高亮 由于ueditor的种种bug,所以博主果断抛弃了它而选择了kindeditor!kindeditor的配置挺简单的,就是代码高亮的显示效果不太好。 kindeditor代码高亮的具体配置: 1...

kindeditor如何显示代码高亮

由于ueditor的种种bug,所以博主果断抛弃了它而选择了kindeditor!kindeditor的配置挺简单的,就是代码高亮的显示效果不太好。

kindeditor代码高亮的具体配置:

1.首先载入css和js

kindeditorPath/plugins/code/prettify.css
kindeditorPath/plugins/code/prettify.js

2.然后加入以下js代码即可:

prettyPrint();

但是本人认为kindeditor的代码高亮效果不是很好,所以就选择了ueditor的代码高亮插件。使用ueditor中的代码高亮插件步骤如下:

1.修改kindeditor中plugins/code/code.js

代码45行左右改成如下即可

var type = K('.ke-code-type', dialog.div).val(),
code = textarea.val(),
html = '
<pre class="brush:' + type + ';toolbar:false">\n' + K.escape(code) + '</pre>';

2.将百度编辑器中的third-party/SyntaxHighlighter/shCoreDefault.css和third-party/SyntaxHighlighter/shCore.js复制到code文件夹下,然后在要显示代码高亮的页面加入以下代码即可

<link href="kindeditorPath/plugins/code/shCoreDefault.css" rel="Stylesheet" type="text/css" />
<script src="kindeditorPath/plugins/code/shCoreDefault.js"></script>
<script>
SyntaxHighlighter.all();
</script>

怎么样,代码是不是显示出来了?

本文地址:http://wanql.sinaapp.com/blog_19.html


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论