博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
kindeditor + syntaxhighlighter 使文章内的插入代码高亮显示
阅读量:7026 次
发布时间:2019-06-28

本文共 2891 字,大约阅读时间需要 9 分钟。

hot3.png

首先需要在页面中引入所需FE文件:

两个js和一个css文件是必须要引用的文件;

shCore.js是syntaxhighlighter插件的基础代码;

shAutoloader.js作用syntaxhighlighter插件的代码高亮显示时自动加载所需文件;但是如果目录不正确的话,就会加载失败,解决方法如下SyntaxHighlighter.autoloader.apply()中给出js文件的位置,

clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css"); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js'); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shAutoloader.js'); ?>

然后,修改kindeditor中plugins/code/code.js:

修改此处的作用是将kindeditor默认使用的prettry插件css类,修改为syntaxhighlighter插件css类:brush:,同时给出配置参数toolbar:右上角的工具栏,auto-links:自动修改链接 

cls = 'brush:' + type + '; toolbar: false; auto-links: FALSE;';    var html = '
\n' + K.escape(code) + '
';

html = ['
', '
', '
', '
', '
', '
'].join(''),

如果想在填写表单的时候有代码样式,需要在创建表单的kindeditor的时候,即调用KindEditor.ready()的时候配置的cssPath项中的css文件中加入.ke-content样式,如下例子:

此处并不会使代码语法高亮,只是标识一下代码部分

/**code**/.ke-content {        font-size: 10pt;}.ke-content pre {        font-size:9pt;        font-family:Courier New,Arial;        border:1px solid #ddd;        border-left:5px solid #6CE26C;        background:#f6f6f6;        padding:5px;}.ke-content code {        margin: 0 2px;        padding: 0 5px;        white-space: nowrap;        border: 1px solid #DDD;        background-color: #F6F6F6;        border-radius: 3px;}.ke-content pre>code {        margin: 0;        padding: 0;        white-space: pre;        border: none;        background: transparent;}.ke-content pre code {        background-color: transparent;        border: none;}.ke-content p {        margin: 0 0 15px 0;        margin-bottom:15pt;        line-height:1.5;        letter-spacing: 1px;}.ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;}.ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;}.ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;}.ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../img/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}

 

好了,自此语法高亮已经满足基本使用,效果不错,至于kindeditor如果整合进yii框架,下一篇文章会做详细介绍。

转载于:https://my.oschina.net/liuxiaobo/blog/200863

你可能感兴趣的文章
第一次作业+105032014098
查看>>
Codeforces 832B: Petya and Exam
查看>>
axios链接带参数_VUE升级(全面解析vuecil3/vuecil4的vue.config.js等常用配置,配置axios)...
查看>>
vue warning如何去掉_详解vue组件三大核心概念
查看>>
qt mysql md5加密_Qt 给密码进行MD5加密
查看>>
用java swing做连连看_java基于swing实现的连连看代码
查看>>
java关键字定义字符变量_Java 关键字和标识符
查看>>
oracle12 se1和se2,小屏党的最终执念,12Mini和SE2,到底谁更值得入手?
查看>>
WebRequest 超时不起作用
查看>>
OpenGL 函数作用列表
查看>>
12篇学通C#网络编程——第四篇 TCP应用编程
查看>>
ASP.NET MVC的DropDownList
查看>>
B-tree vs hash_我思故我在_百度空间
查看>>
spring.net 结合简单三层实例
查看>>
phpcms(v9)添加模型
查看>>
LINQ 图解
查看>>
状态目标bfs+哈希表 + 三杯水
查看>>
MVC系统过滤器、自定义过滤器
查看>>
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现...
查看>>
管理管理器深度探索QT窗口系统---布局篇
查看>>