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

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

  • 相关阅读:
    cf415D Mashmokh and ACM(DP)
    [USACO]EulerianTour (欧拉通路)
    hdu2544 (SPFA)
    hdu2544 (bellman-ford)
    [TC]SRM615 div1 250 AmebaDiv1
    Step By Step (zz from UESTC)
    [USACO]Sweet Butter 多种解法
    Node.js权威指南 (3)
    Web开发常见问题荟萃
    比较vue.js react.js angular.js
  • 原文地址:https://www.cnblogs.com/yq-Hua/p/5540846.html
Copyright © 2011-2022 走看看