When the blog was just launched, the blogger hesitated for a long time when choosing the code highlighting method. At that time, I thought about how to highlight the code? Highlight in plug-in mode or non plug-in code? Which plug-in is used for code highlighting? A series of questions, such as whether the plug-in will be garbled when not in use. It was also used at that time SyntaxHighlighter The highlighted plug-in has powerful functions and is really good to use, but one disadvantage is its huge size, which causes the page loading speed to decline; The dependency is also strong. If the plug-in is not used, all parts of the display code will be confused; So I finally decided to use the code highlighting scheme without plug-in version. Although it is troublesome to use, it is worth comparing with the above two shortcomings.
Introduction to CodeRenderUnmi
Highlighted gadget of local conversion code: CodeRenderUnmi
This procedure is based on dp Syntax coloring tool for code written by SyntaxHighlighter.
The supported coloring languages are: java/xml/sql/jscript/css/cpp/c #/python/vb/perl/php/ruby/delphi
You can add support for more languages. This program is based on the dp SyntaxHighlighter extends support for Perl language on the basis of JS code and CSS with corresponding syntax. Language extension support can be achieved by adding corresponding codes in shCore.js and highlight.css.
Implementation principle
First, deploy the corresponding CSS file in the web page, or directly integrate it into your own CSS file. Then use the desktop software to copy and convert the code. The software will automatically add the corresponding style label to the code, and finally publish it on the web page as the colored code.
Interface Introduction
It is easy to operate. Paste the code you want to color in Source Code, select the language, click Render button, and the corresponding HTML code will be generated in HTML Code. At the same time, the effect can be previewed in HTML Preview.
Brief description: You can select the supported syntax from the Lang drop-down box. Gutter, Controls, CollapseAll, FirstLine and Columns on the right of Options are additional elements generated by control. You can try them one by one. Each content display (input) area provides a Copy/Paste/Clear shortcut link, as well as a general Clear button.
Copy the generated HTML code, switch to the HTML source code editing mode in the log editing window, and paste it.
However, to correctly display code highlighting, you need to load the style file "highlight. css" (in the downloaded zip) in the WordPress theme.
Install using the CodeRenderUnmi method
1、 Deploy css file
First, download the compressed package. After decompression, there are 5 files in it.
CodeRender.hta (main program of hta webpage, which can be run directly)
CodeRender.ico (icon file)
Highlight.css (style file)
Readme.txt (description document)
ShCore.js (coloring action script)
Secondly, upload highlight.css to the theme directory;
Finally, open header.php to find:
- <link? rel= "stylesheet" ? type= "text/css" ? href= "<?php?bloginfo('template_directory');??>/ style.css" ?/>
Add after:
- <link? rel= "stylesheet" ? href= "<?php?bloginfo('template_url');??>/ highlight.css" ?/>
Of course, you can also copy highlight.css All the code in the to your theme style.css, or directly copy this file to the website directory, and reference the file in the header, the above steps will be avoided! The size of the file is 6KB, and it contains coloring styles of various languages. If you are sure that you will not use a language, you can delete the corresponding CSS code. You can judge the language type by judging the name of the CSS.
Note: The WordPress program will replace the half width symbol with the full width symbol by default, so that others can't copy your code. You can add such code to the function. php in the WordPress theme background and turn off this function. To be placed in<? Php and?> between.
- remove_filter('the_content', 'wptexturize');
2、 Code escape operation
It needs to be opened when using CodeRender.hta , and then paste the code in the Source Code column. Lang selects the corresponding code type. After clicking Render, the HTML source code will be displayed in the HTML Code, and the HTML Preview will display the preview effect. The options in the option can be seen in the preview by clicking. When editing an article, just copy the HTML source code and paste it into the source code editing mode of the blog.
Style modification suggestions
To adapt to responsive web pages and avoid left and right sliders, you can set automatic line wrapping.
by .dp-highlighter ol li, .dp-highlighter .columns div increase word-wrap: break-word; word-break: normal;
Download address
Note: When copying code with IE core browser, the line number will be copied together, but not with Firefox, Chrome and other browsers.
