当前位置:首页 > CMS教程 > WordPress > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2014-03-23 22:06:39 浏览: 评论:0 

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

一、代码自动行号功能

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

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

不过虽然这样自定义很强,不过想在实现增加行号每次都手工添加还是比较麻烦,有没有一劳永逸的办法呢?当然可以的,可以修改wp-contentpluginskindeditor-for-wordpresspluginscodecode.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高亮格式代码,修改后的内容如下:

  1. pre.prettyprint { 
  2.     margin-left5px
  3.     padding-left18px
  4.     border-left3px solid #6CE26C
  5.     font-family: Monaco, 'DejaVu Sans Mono''Bitstream Vera Sans Mono''Lucida Console'monospace !important
  6.     overflowauto;} 
  7.     /*font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;*/ 
  8.     /*font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;*/ 
  9.     pre.prettyprint.linenumstrigger { 
  10.     margin-left0px
  11.     padding-left0px
  12.     border-left0px; } 
  13.     pre.prettyprint 
  14.     ol li { margin-left18px
  15.     padding-left18px
  16.     border-left3px solid #6CE26C; } 
  17.     pre ol li.highlighttrigger { 
  18.     background-color#DAD7FF; } 
  19.     .str { color#080; } 
  20.     .kwd { color#008font-weightbold; } 
  21.     .com { color#800; } 
  22.     .typ { color#606font-weightbold; } 
  23.     .lit { color#066; } 
  24.     .pun { color#660; } 
  25.     .pln { color#000; } 
  26.     .tag { color#008; } 
  27.     .atn { color#606; } 
  28.     .atv { color#080; } 
  29.     .dec { color#606; } 
  30.     @media print { 
  31.     .str { color#060; } 
  32.     .kwd { color#006font-weightbold; } 
  33.     .com { color#600font-styleitalic; } 
  34.     .typ { color#404font-weightbold; } 
  35.     .lit { color#044; } 
  36.     .pun { color#440; } 
  37.     .pln { color#000; } 
  38.     .tag { color#006font-weightbold; } 
  39.     .atn { color#404; } 
  40.     .atv { color#060; }} 

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

2、修改主题css

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

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

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

Tags: wordpress KindEditor 代码高亮

分享到: