>

kindeditor4整合SyntaxHighlighter,让代码亮起来

- 编辑:乐百家599手机首页 -

kindeditor4整合SyntaxHighlighter,让代码亮起来

简介
基于 Google Code Prettify 实现的WordPress代码高亮体现,特别简单。google code prettify好疑似谷歌弄的生机勃勃套代码高亮的js代码,使用时假使将代码放到< pre>< /pre>标签中就足以使代码高亮着色。小编那套wordpress没有代码高亮成效,以前见大前端的D8 wordpress模板的代码高亮做的不行不错,于是就将那套代码高亮的效能提收取来,加到了一德一心的博客模板上了。
福衢寿内衣模特式
将自身给的prettify.css 和prettify.js放到核心的根目录下,然后再大旨的header.php文件的<head>标签中引用pretty.css,具体代码如下

编辑器KindEditor官网:

这少年老成篇作者将介绍怎样让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用极度广阔,所以将kindeditor默许的prettify替换为SyntaxHighlighter代码高亮插件

标签之间投入这两行代码:

<link href="<?php bloginfo('template_directory'); ?>/prettify.css" type="text/css" rel="stylesheet" />

1、需求加载的JS和CSS文件为:

上一篇“让kindeditor展现高亮代码”中早就说过,高亮代码首要用的是class,所以

复制代码 代码如下:

在 焦点footer.php文件</body> 标签前面加入以下代码:

复制代码 代码如下:

第一步:首先更正kindeditor代码高亮写入pre标签时的class类名:

复制代码 代码如下:

<script type="text/javascript" src="<?php echo home_url(''); ?>/wp-includes/js/jquery/jquery.js"></script>

<script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script>
<script src="kindeditor-4.1.4/plugins/code/prettify.js" type="text/javascript"></script>
<link href="kindeditor-4.1.4/plugins/code/prettify.css" rel="stylesheet" type="text/css" />

开采/kindeditor4/plugins/code/code.js,找到相符于那般后生可畏行

将索要着色的代码写入以下形式的

借使宗旨已经引进 jquery.js,上风度翩翩行能够去除。
上面包车型大巴代码是给具有的 < pre> 标签加多 prettyprint linenums 类,linenums 表示彰显行数 。然后 prettyPrint 来深入分析代码并上色。

2、编辑器最初化设置后,在里边加prettyPrint():

html = '<pre class="prettyprint'   cls   '">n'   K.escape(code)'</pre>';

标签之中:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/prettify.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function () {
 jQuery("pre").addClass("prettyprint linenums");
 prettyPrint();
 }); </script>

复制代码 代码如下:

改为以下的内容:

复制代码 代码如下:

使用办法
上边的办法正是促成了代码高亮,使用方法便是,在写文章时,切换成文本形式,用 < pre>你的代码< /pre> 包围代码代码块,公布小说后,就足以看见上色的成效了,效果就是见本身下面的代码。
本来代码高亮的体裁是可以改进的,借使不希罕小编那套样式,能够去网络找找其余prettify的css,小编个人照旧那么些心仪这套样式的,推荐使用
附件
prettify.js和prettify.css ,百度云下载

KindEditor.ready(function (K) {
window.EditorObject = K.create('#txtBody', {
cssPath: 'plugins/code/prettify.css',
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: [
'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
prettyPrint();
});

html = '<pre class="brush:'   type   ';">n'   K.escape(code)  '</pre>';

本文由乐百家服务器发布,转载请注明来源:kindeditor4整合SyntaxHighlighter,让代码亮起来