wordpress下KindEditor代码高亮与行号显示
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高亮格式代码,修改后的内容如下:
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下KindEditor代码高亮与行号显示 - WordPress的详细内容...