手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 代码学习 > 代码学习

kindeditor4.1.3开启语法高亮显示——Google Code Prettify

作者:星知苑 时间:2012-10-24 14:00:04

因为看到Google Code Prettify对代码进行语法着色的效果还是不错,虽然相对于syntaxHighlighter来说还有不小的差距,但是Prettify的js库和css文件可以说的上是短小精悍了。不到15K的体积,对加载几乎没有影响。

废话就不说了,下面开始KindEditor,它默认保存的时候,保存的内容是<pre class="iceCode:xxx"></pre>(XXX就是代码格式)比如<pre class="iceCode:php"></pre>。

注意:不同的代码高亮是不兼容的,所以用了一种高亮代码后再用另一个,那么就比较麻烦了。

因为kindeditor 4.1.3官方用的是google-code-prettify高亮(以下简称prettify),所以我这里也用prettify高亮,因为集成比较方便。

[break]

直接用kindeditor官方的演示是没有代码的的处理的,还有前台如何使用高亮也没有说明。看了几个编辑器官方的说明文档总是不怎么全的。

 

后台编辑器代码是没有高亮显示的,但是代码会有特效

1.后台需要加载prettify.js和prettify.css,

还有页脚填上<script>prettyPrint(); </script>

<script charset="utf-8" src="./kindeditor/plugins/code/prettify.js"></script>
<script>
        var editor;
        editor.ready(function(K) {
                editor= K.create('textarea[name="content"]',{
                cssPath :[ './kindeditor/plugins/code/prettify.css']
                 });	
        });
	prettyPrint(); 
</script>

 

2.前端显示,添加下面的代码到前端页面。

<link type="text/css" rel="stylesheet" href="./kindeditor/plugins/code/prettify.css"/>
<script type="text/javascript" src="./kindeditor/plugins/code/prettify.js"></script><script>prettyPrint();</script>

 

 

注:最好还要修改plugins/code文件夹下的prettify.css,再最后加上以下内容,不加的话,前台代码不会换行,如果有长代码会很难看的,width是代码宽度,自己看着改。

 

pre.iceCode:{
	width: 630px;
	margin: 1em auto;
	padding: 1em;
	white-space: pre-wrap;
}

 

 

 

良心推荐

聊天软件排行榜2021
  • 易信聊天软件官方下载
  • 逗萌漂流瓶app无限萌豆百度云
  • qq极速版下载安装2021最新版
  • QQapp最新版下载安装
  • 微信最新版本
  • soul下载
手机一直是一个时代进步的改变的特征,那么在你的社交圈子里肯定少不了用到需要聊天软件来辅助的,不管是走到哪里只要是你的手机有电就可以随时随地的畅聊,还可以用到很多的不同的功能,这里面是小编根据目前比较多人用的聊天软件做一个简单的排名。

相关资讯