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. 【LoadRunner】利用lr_db_connect函数对Oracle数据库压测的完整流程

    项目中常常会有直接对数据库进行压测的需求,以前都是通过Jmeter实现的,但是Jmeter本身图表及结果收集方面没有Loadrunner那么强大,所以利用loadrunner工具自己的函数整理了一个脚 ...

  2. Python+Selenium练习篇之5-利用partial link text定位元素

    本文介绍如何通过partial link text来定位页面元素.看到这个,有点和前一篇文字link text有点类似.字面意思,确实和link text相类似,partial link text就是 ...

  3. Wordpress 通过 post id 获取文章 url

    global $post; echo get_permalink($post->ID); 函数详解: Codex - get_permalink() 注意:有些链接是通过 SEO 重定向的,比如 ...

  4. CSU-2221 假装是区间众数(ST表模版题)

    题目链接 题目 Description 给定一个非递减数列Ai,你只需要支持一个操作:求一段区间内出现最多的数字的出现次数. Input 第一行两个整数N,Q 接下来一行有N个整数,表示这个序列. 接 ...

  5. java面试需要准备什么呢?c++可以看看

    作者:Mingche Su链接:https://zhuanlan.zhihu.com/p/20545626来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 语言知识点:以 ...

  6. “取出数据表中第10条到第20条记录”的sql语句+selecttop用法

    1.首先,select top用法: 参考问题 select top n * from和select * from的区别 select * from table -- 取所有数据,返回无序集合 sel ...

  7. Nodejs项目网页图标的处理

    今天,我要说的是Nodejs中,关于网页图标的处理. 在讲解怎么处理之前,我们的了解一下什么是网页图标.网页图标就是我们网页打开之后,标签页的图标,比如下面这个 前面的小人就是我们博客园的网页图标. ...

  8. aplusb 数论

    题目描述 SillyHook 要给小朋友出题了,他想,对于初学者,第一题肯定是a+b啊, 但当他出完数据后神奇地发现.in 不见了,只留下了一些.out,他想还原.in,但 情况实在太多了,于是他想要 ...

  9. ionic2 解决白屏问题

    ionic2下创建项目后,运行启动页后白屏几秒,解决方案 问题描述 最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好. 解决过程 查看到了一篇关于这个 ...

  10. 关于python的整形(int)自动转长整形(long)的问题

    有时需要访问某个接口,其中传入的整形参数可能比较长就会变成long,这时如果用str()的话‘L’就会被转化到字符串中,导致接口不能识别: 这种情况下应该优先使用json来转译,可以完美保持翻译pyt ...