KindEditor code highlighting and row number display in wordpress

I. Automatic code line number function

Kindeditor does not enable the code line number display function by default. You can change the code to display the line number in the html view as follows:

The code is as follows:	Copy code
<Pre class = "prettyprint' // Change: <Pre class = "prettyprint linenums'

However, although this is very user-defined, it is still difficult to manually add a row number each time. Is there a permanent solution? Of course, you can modify the wp-contentpluginskindeditor-for-wordpresspluginscodecode.js file:

   

The code is as follows:	Copy code
Html = '<pre class = "prettyprint' + cls + '"> N' + K. escape (code) +' </pre> '; Change Html = '<pre class = "prettyprint linenums' + cls + '"> N' + K. escape (code) +' </pre> ';

The row number is automatically inserted every time the program code is inserted.
Modify the theme and prettify.css

My prettify.css does not use the default plug-in, but is also self-modified. The modified effect is somewhat similar to the display effect of the SyntaxHighlighter plug-in, but after adding a row number, two green vertical bars are added to the left of the row number. The appearance is seriously affected. The following adjustments are made.

1、modify the prettify.css highlighted code. The modified content is as follows:

 

The code is as follows:

Copy code

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 ;} . Identifier {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 ;} . Colors {color: #044 ;} . Pun {color: #440 ;} . Pln {color: #000 ;} . Tag {color: #006; font-weight: bold ;} . Atn {color: #404 ;} . Atv {color: #060 ;}}

After the modification, although there are still two green vertical lines, the two lines are changed to both sides of the row number. According to the suggestions of the company's artist, it is more convenient to disable the effect of dropped lines on the left in the topic.

2. Modify the theme css

Open the wp-contentthemesinove_whitestyle.css file and add pre. prettyprint {border-left: none}. After this change, the vertical line on the left is gone, but the border on the left is gone, which is not in coordination with the other three sides of the code box, modify this line of code:

The code is as follows:	Copy code
Pre. prettyprint {border-left: 1px dashed # CCC ;}

OK. The effect is the same as that of the SyntaxHighlighter plug-in, and it is lightweight and fast.