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代码高亮功能的更多相关文章

  1. 使用prismjs为网站添加代码高亮功能

    prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...

  2. eclipse怎样开启/关闭代码提示功能

    把以下红色框中的勾勾选上就是使用代码提示功能,不选就是关闭.

  3. KindEditor - 代码高亮

    *:插入数据库的数据,不用转义,KE已经自动转义过了. 调用的时候使用引入代码的css: 显示代码的页面:

  4. 让kindeditor显示高亮代码

    kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...

  5. Hilite代码高亮工具

    在用<有道云笔记>等软件时候,软件自身不提供代码高亮功能,对于需要记录code的学习笔记,视觉效果丢失. 有很多在线工具能用来代码高亮,比如oschina就有代码高亮页面用于着色. 但是我 ...

  6. Markdown 语法和代码高亮

    安装 Python Markdown 安装命令 pip install markdown 视图中渲染 Markdown blog/views.py import markdown from djang ...

  7. HelloDjango 第 09 篇:让博客支持 Markdown 语法和代码高亮

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...

  8. Mac 配置代码高亮 Git状态显示

    Mac 一个为开发者量身定做的笔记本,分享给大家希望能帮助大家配置一个好的开发环境,好的开发环境才有好的心情Code. 首先进入到Home到目录一般默认打开的都是Home,如果不是输入 cd ~ 回车 ...

  9. Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法

    在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...

随机推荐

  1. Python 包导入

    首先我们先了解下python中寻找模块的顺序 是否是内建模块 ->主目录 ->PYTHONPATH环境变量 ->标准库 -> 首先判断这个model是否是built-in,即内 ...

  2. HashMap 简介

    HashMap 前置条件 了解数组 了解链表 jdk version: 1.8 个人分3步来了解HashMap 通过数据结构图 通过为了完成这样的数据结构我们该怎么做 HashMap 实际put方法源 ...

  3. centOS6.6虚拟机启动后登陆界面无法显示

    1.图一和图二对比就很明显发现,我的登陆界面不见了(突然断电导致不正常关机,造成图形界面桌面崩溃) 2.解决方法:启动按Ctrl+Alt+f2切换进命令行界面,root账号进入,重新下载图形界面

  4. Django中前端界面实现级联查询

    Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...

  5. WMS请求GetCapabilities,变成下载mapserv.exe解决办法

    WMS1.1.1和WMS1.3.0两个版本中的几个区别: 1.WMS1.1.1中提供的DescribeLayers.GetStyles等接口在WMS1.3.0中不再提供支持,只提供GetCapabil ...

  6. HDU 5889 Barricade(最短路+最小割水题)

    Barricade Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  7. 学习RMQ-ST表

    RMQ一般是一个二维数组,用$dp[i][j]$表示起点为i开始连续数$2^j$个元素其中的最值,由于对于一个闭区间有:$R-L+1=len$因此也可以用另外一种记法:闭区间为$[i,i+2^j-1] ...

  8. BZOJ3260 跳 【组合数】

    题目 邪教喜欢在各种各样空间内跳.现在,邪教来到了一个二维平面. 在这个平面内,如果邪教当前跳到了(x,y),那么他下一步可以选择跳到以下4个点: (x-1,y),(x+1,y),(x,y-1),(x ...

  9. make gif pic

    http://www.cockos.com/licecap/ licecap 1.open licecap 2.record ,make a pic filename,like pic1 3.work ...

  10. shell变量的数值计算

    shell中常见的算术运算命令如下 1.(())  用于整数运算的常用运算符,效率很高 2.let 用于整数运算,类似于  (()) 3.expr  可用于整数计算,但还有很多其他的额外功能 4.bc ...