WordPress and pretplugin-free code highlighting

You can use the plug-in to highlight wordpress code. Previously, I used the SyntaxHighlighter plug-in. The reason for giving up is actually too complicated. To highlight code, you must add the [code language = "xxx"]... [/code] mark. After I uninstalled the plug-in, I found that the article directly displays the code. This makes people feel bad. How can I avoid plug-ins and easily implement code highlighting? Finally, I chose Google pretpipeline, as shown in the following figure.

 

Google Code pret is an open-source Javascript library for Code highlighting. It supports common languages such as C/C ++, Java, Python, Ruby, PHP, and Javascript. Pretygenerally only contains two files: Prettify. js and prettify.css. The size of the compressed pretstrap. js is about 15 KB, which is very small. Another attraction is simplicity. When you use it for code highlighting, you do not need to specify the language type. Prettify will automatically judge and process the language.

Add-free WordPress code highlighting steps

1. Download js and css files

Search online

The css file only contains the highlighted themes of the code. I select the default one. Of course, you can select the appropriate style here.

2. Modify the functions. Php file

Open the functions. Php file in the wordpress topic file, at the end?> Add the following code. Step 1 download the js file and save it to the js directory under the current topic.

Function dangopress_esc_html ($ content ){
$ Regex = '/(<pre \ s + [^>] *? Class \ s *? = \ S *? [", \ ']. *? Prettyprint .*? [", \ ']. *?>) (.*?) (<\/Pre>)/sim ';
Return preg_replace_callback ($ regex, dangopress_esc_callback, $ content );
}
Function dangopress_esc_callback ($ matches ){
$ Tag_open = $ matches [1];
$ Content = $ matches [2];
$ Tag_close = $ matches [3];

// $ Content = htmlspecialchars ($ content, ENT_NOQUOTES, get_bloginfo ('charset '));
$ Content = esc_html ($ content );

Return $ tag_open. $ content. $ tag_close;
}
Function setup_load_script (){
// Register pret.pdf. js
Wp_enqueue_script ('pretruntime-JS', get_template_directory_uri (). '/js/pretruntime. min. Js ',
Array (), '20140901', true );
}
Function wp_prettify_load (){
If (is_single ()){
Add_filter ('The _ content', 'dangopress _ esc_html ', 2 );
Add_filter ('comment _ text', 'dangopress _ esc_html ', 2 );
Add_action ('WP _ enqueue_scripts ', 'Setup _ load_script ');
    }
}
Add_action ('WP ', 'WP _ prettify_load ');

Finally, wp_prettify_load indicates loading only in the article.

3. Modify the header. Php file

Open the header. Php file in the wordpress topic file, and add the following code before the

<? Php if (is_single () {?> <Link rel = "stylesheet" type = "text/css" media = "all" href = "<? Php echo get_template_directory_uri (). '/css/prettify-default.css';?> "/>
Here, wordpress + pretplugin is free of plug-in. The article code highlighting setting is over. We can put the code in the pre label when writing articles.