zoukankan      html  css  js  c++  java
  • 开启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']
    });

    这样后台编辑器就可以实现如下所显示的效果了:

  • 相关阅读:
    实例 find
    实例 历史命令查找
    Crontab
    find命令
    实例 tar备份以日期命名
    断开网络驱动器后图标不消失
    Windows7系统下优化固态硬盘
    目标进程已退出,但未引发 CoreCLR 启动事件
    md5 helper
    List<T> or IList<T>
  • 原文地址:https://www.cnblogs.com/yq-Hua/p/5540846.html
Copyright © 2011-2022 走看看