百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> kindeditor编辑器整合Syntaxhighlighter代码高亮
分享文章到:

kindeditor编辑器整合Syntaxhighlighter代码高亮

发布时间:01/15 来源: 浏览: 关键词:
Syntaxhighlighter插件是一款高亮显示代码的插件,现在很多的网站都有这个功能,下面我来介绍在kindeditor编辑器整合Syntaxhighlighter插件,实现高亮代码显示。

我使用的是kindeditor-4.1.5版本 

链接地址:http://kindeditor.googlecode.com/files/kindeditor-4.1.5.zip 

Syntaxhighlighter 代码高亮提示插件 网上就可以搜到 

   
步骤: 

   
1。找到kindeditor的code插件的code.js文件(在editor/plugins/code下)查找一下两行后删除或者注释掉 

 代码如下

   
cls = type === "" ? "" :  " lang-" + type, 

html = "<pre class="prettyprint" + cls + ""> 

" + K.escape(code) + "</pre> "; 
   

修改为: 
   

cls = type === "" ? "" : type, 

html = "<pre class="brush:" + cls + ""> 

" + K.escape(code) + "</pre> "; 

   
在到 kindeditorphpcode目录下找到 demo.php 

打开插入一下代码,如果没有你需要的语言你可以到syntaxhighlighter/scripts/这个目录下查找你需要的语言加入即可 
   

 代码如下

<script type="text/javascript" src="../syntaxhighlighter/scripts/shCore.js"></script> 

<script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushPhp.js"></script> 

<script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushJScript.js"></script> 

<script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushCss.js"></script> 

<script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushSql.js"></script> 

<script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushXml.js"></script> 

<link type="text/css" rel="stylesheet" href="../syntaxhighlighter/styles/shCoreDefault.css"/>


使用kindeditor插件为了使插入的代码高亮SyntaxHighlighter,但是代码过长不能换行,就解决方案

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有7人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板