开启KindEditor代码高亮功能
KindEditor4.0 开始支持插入代码功能!!!如何使用插入代码功能实现前段页面代码高亮显示和后台代码维护显示!!!
1. 需要高亮显示代码的前台页面需要引用相应的css样式和js文件
<link href="../../editor/plugins/code/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="../../editor/plugins/code/prettify.js"></script>
2. 插入脚本
<script type="text/javascript">
$(function () { prettyPrint(); });
</script>
这样前台页面就可实现类似这样效果的代码显示了!

之后,还可以根据自己的喜好,对现有前台样式进行调整,比如我的前台样式会引发横向滚动条显示不出来,这样就导致超长行的代码显示不全的问题。
我修改了对应的prettify.css 文件,将该文件里的pre.prettyprint 样式追究了一个overflow:auto 即可....
but,后台编辑器维护里面还没有插件样式,这样就导致编辑器中插入的代码跟普通文字一样,无法区分开!所以可使用如下方式对后台编辑器里的显示进行调整。
var editor = KindEditor.create('textarea.editor', {
cssPath : ['[kePath]/plugins/code/prettify.css']
});
这样后台编辑器就可以实现如下所显示的效果了:

开启KindEditor代码高亮功能的更多相关文章
- 使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
- eclipse怎样开启/关闭代码提示功能
把以下红色框中的勾勾选上就是使用代码提示功能,不选就是关闭.
- KindEditor - 代码高亮
*:插入数据库的数据,不用转义,KE已经自动转义过了. 调用的时候使用引入代码的css: 显示代码的页面:
- 让kindeditor显示高亮代码
kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...
- Hilite代码高亮工具
在用<有道云笔记>等软件时候,软件自身不提供代码高亮功能,对于需要记录code的学习笔记,视觉效果丢失. 有很多在线工具能用来代码高亮,比如oschina就有代码高亮页面用于着色. 但是我 ...
- Markdown 语法和代码高亮
安装 Python Markdown 安装命令 pip install markdown 视图中渲染 Markdown blog/views.py import markdown from djang ...
- HelloDjango 第 09 篇:让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...
- Mac 配置代码高亮 Git状态显示
Mac 一个为开发者量身定做的笔记本,分享给大家希望能帮助大家配置一个好的开发环境,好的开发环境才有好的心情Code. 首先进入到Home到目录一般默认打开的都是Home,如果不是输入 cd ~ 回车 ...
- Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法
在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...
随机推荐
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- bash shell命令与监测的那点事(二)
bash shell命令与监测的那点事之top 上次我们说到了ps命令,ps命令虽然在收集运行在系统上的进程信息很有用,但是也有不足之处,ps命令只能显示某个特定时间点的信息,如果你想观察频繁换进换出 ...
- Stephen 博客正式开通 【个人公众号:Stephen 】
个人博客开通. 个人公众号:Stephen
- Python 3.6 性能测试框架Locust安装及使用
背景 Python3.6 性能测试框架Locust的搭建与使用 基础 python版本:python3.6 开发工具:pycharm Locust的安装与配置 点击“File”→“setting” 点 ...
- 使用anaconda
Please run $ source /opt/anaconda/bin/activate root $ source /opt/anaconda/bin/deactivate root to ...
- [oldboy-django][2深入django]老师管理--查看,添加,编辑
# 添加老师(下拉框多选) 数据库设计: class Teacher(models.Model): name = models.CharField(max_length=64) cls = model ...
- 基础概念:Oracle数据库
基础概念:Oracle数据库.实例.用户.表空间.表之间的关系 数据库:Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实Oracle数据库的 ...
- nyoj 1282 部分和问题
部分和问题(入门题) 时间限制:1000 ms | 内存限制:65535 KB 难度:0 描述 给你n个数(a1,a2,a3.......an) ,是否存在某一些数字加起来等于k,有就输出 & ...
- AngularJs之HelloWorld
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- Struts2 改变语言状态
只要在请求中增加 request_locale=en_US 参数,就可以实现语言的切换,内部由拦截器实现