wordpress下KindEditor代码高亮与行号显示

wordpress自带的编辑器不符合中国国情,一直使用的都是kindeditor编辑器,该编辑器自带有google prettyprint 代码高亮,通过改造后,完全可以实现SyntaxHighlighter插件的显示效果。而且更轻巧快速。

一、代码自动行号功能

kindeditor默认未开启代码行号显示功能的,可以通过在html视图下,将需要显示行号的代码做如下更改:

<pre class="prettyprint'
//改为:
<pre class="prettyprint linenums'

不过虽然这样自定义很强,不过想在实现增加行号每次都手工添加还是比较麻烦,有没有一劳永逸的办法呢?当然可以的,可以修改wp-content/plugins/kindeditor-for-wordpress/plugins/code/code.js文件:

html = '<pre class="prettyprint' + cls + '">n' + K.escape(code) + '</pre> ';
更改为
html = '<pre class="prettyprint linenums' + cls + '">n' + K.escape(code) + '</pre> ';

以后每次再插入程序代码的时候就自动带有行号。

二、主题及prettify.css修改

本身我的prettify.css使用的并不是默认插件自带,也是自改过,改过的效果有点类似SyntaxHighlighter插件的显示效果,不过在增加完行号后,发现在行号左侧多了两个绿色竖线。严重影响美观,现做如下调整。

1、修改prettify.css高亮格式代码,修改后的内容如下:

pre.prettyprint {
margin-left: 5px;
padding-left: 18px;
border-left: 3px solid #6CE26C;
font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;
overflow: auto;}
/*font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;*/
/*font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;*/
pre.prettyprint.linenumstrigger {
margin-left: 0px;
padding-left: 0px;
border-left: 0px; }
pre.prettyprint
ol li { margin-left: 18px;
padding-left: 18px;
border-left: 3px solid #6CE26C; }
pre ol li.highlighttrigger {
background-color: #DAD7FF; }
.str { color: #080; }
.kwd { color: #008; font-weight: bold; }
.com { color: #800; }
.typ { color: #606; font-weight: bold; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }}

修改完成后,虽然还是两条绿色竖线,不过两条线变成了在行号两边了。根据公司美工的建议,左边去掉线的效果在主题里禁用比较方便。

2、修改主题css

打开wp-contentthemesinove_whitestyle.css文件,在最后增加 pre.prettyprint{border-left:none},这样改后,左边的竖线是没了,不过左边的边框也没了,和代码框另外三边显的不协调,把该行代码修改为:

 pre.prettyprint{border-left:1px dashed #CCC;}

ok,效果实现,和SyntaxHighlighter插件的显示效果一样,而且更轻巧快速。

后记:

正常使用了一段时间的行号显示和代码高亮在升级wordpress版本后前端又出现异常,后来增加了一处优化的地方,打开/wp-content/plugins/kindeditor-for-wordpress/kindeditor.php文件,找到:

add_action('wp_enqueue_scripts', array(&$kindeditor, 'add_head_script'));
修改为:
add_action('wp_footer', array(&$kindeditor, 'add_head_script'));

修改的作用是把 Kindeditor 的高亮代码 js 注册在底部(注意:不一定要在wp_footer,你可以根据实际情况自己修改,总之在引入 jQuery 之后就好了),保存。这样就OK了。因为无论什么页面都会调用footer底部。




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: 开源软件 标签: ,
  1. 2014年4月14日16:26 | #1

    加上行号后,复制的代码,粘贴后是不换行的。。全部堆在一行,有没有解决办法?

  2. 2014年4月14日16:27 | #2

    我说的是IE内核下。。
    @玛思阁

    • admin
      2014年4月14日17:17 | #3

      没完全明白你的意思。如果是复制后堆在一块儿,解决方法是不要粘贴到notepad上,换成UE或都notepad++就不会出现该问题。如果是在后台编辑文章时出现该问题,那就是你主题或者高亮模块里CSS的问题,在我的主题和google高亮里没遇到你提到的问题。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.