一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2014-03-05 编辑:简简单单 来源:一聚教程网

一、代码自动行号功能

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

 代码如下 复制代码

   

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

   

 代码如下 复制代码
html = '
n' + K.escape(code) + '
';
    更改为
    html = '
n' + K.escape(code) + '
';

以后每次再插入程序代码的时候就自动带有行号。
二、主题及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插件的显示效果一样,而且更轻巧快速。

热门栏目