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']
    });

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

  • 相关阅读:
    Excel长数字防止转换为科学计数法
    SVN迁移部署
    且行且珍惜
    功能的权衡——推荐功能做不做?
    渗透小白如何学编程
    Metasploit log命令技巧
    Metasploit 使用msfconsole帮助功能技巧
    Metasploit resource命令技巧
    Metasploit makerc命令技巧
    Metasploit irb命令使用技巧
  • 原文地址:https://www.cnblogs.com/yq-Hua/p/5540846.html
Copyright © 2011-2022 走看看