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

作者：袖梨 2022-06-25

一、代码自动行号功能

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插件的显示效果一样，而且更轻巧快速。

	  
	                            

        

            

    

        

            
相关文章

        

        
    

    

        

            
精彩推荐