Use jquery syntaxhighlighter plugin to build an IT blog

This title is clearly inaccurate, because it blog owners may not post someCodeWhile syntaxhighlighter isProgramThe following tutorial describes how to use the syntaxhighlighter tool to beautify your blog.ArticleThe included program code fragment style, which is exactly the same as the technology used by the csdn blog.

The Code Formatting Function of the csdn blog has expired in recent days. The official blog announced that the system was under too much pressure and some features were temporarily disabled. For details, refer. Is it because we have recently reported that blog access is slow and the user experience is poor, so the pressure on the client has been reduced temporarily. The specific problem remains unknown.

This problem makes the blog code snippets look ugly. I tried to see where the problem may be. I checked the HTML of the blog article body webpage.Source codeThe script responsible for code coloring is included. See:

Why is it ineffective to include code? Is there a script error? So I opened the Firefox browser error console again, but I didn't find any Script Error Report. Is it possible that the script error was captured (try {...} Catch {...}) But not processed.

Finally, I decided to move the code format FUNCTION OF THE csdn blog to a local trial. So I downloaded the code files that were almost synchronized with the csdn blog online. Of course, they were not downloaded directly from the csdn blog, but on various official networks. These files include the following:

Their functions are as follows: (1) jquery

A well-known and lightweight JavaScript framework can be found in the source code of many large websites, because jquery syntaxhighlighter plugin is based on it, so we need it.

(2) syntaxhighlighter package

JS packages responsible for formatting code can also be used directly to implement code formatting. However, the following plug-in is available because it is inconvenient to use directly.

(3) jquery syntaxhighlighter plugin

A jquery plug-in used to simplify syntaxhighlighter deployment. The plug-in documentation says that syntaxhighlighter can work normally with a line of code.

We have prepared the above files and learned about them. Now we will make a demo. Create a demo.html file in the corresponding file folder and then include the following code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Jquery syntaxhighlighter plugin demo </ Title >
< Script Type = "Text/JavaScript" SRC = "Jquery. js"   > </ Script >
< Script Type = "Text/JavaScript" SRC = "Jquery_highlighter.js"   > </ Script >
< Script Type = "Text/JavaScript" >
$ (Document). Ready ( Function (){
  VaR Option = {
Dir: ' ./Syntaxhighlighter/ ' ,
Name: ' Code ' ,
Showcontrols: True
};
$. Syntaxhighlighter (option );
});
</ Script >
</ Head >
< Body >
< Pre Name = "Code" Class = "JS" >
Array. Prototype. Each = function (callback)
{
For (I = 0; I < This . Length; I ++)
{
Callback. Call (this, this [I]);
}
}
VaR arrayobject = ["JavaScript", "prototype", "jquery"];
Arrayobject. Each (function (x) {alert (x )});
</PRE >
< Pre Name = "Code" Class = "C #" >
Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using system. Collections. Generic;
Using system. text;
Public partial class work: system. Web. UI. Page
{
// Code here
}
</ Pre >
</ Body >
</ Html >

Open it in the browser and you will see the following results:

Finally, I will give a brief explanation of the above Code.

The following code configures parameters such as the default style of the code format. The csdn blog is written in the ghost:

$ (Document). Ready ( Function (){
  // $. Syntaxhighlighter ('./syntaxhighlighter /');
  VaR Option = {
Dir: ' ./Syntaxhighlighter/ ' ,
Name: ' Code ' ,
Showcontrols: True
};
$. Syntaxhighlighter (option );
});

After reading the above tutorial, I believe that if you want to build your own blog, this blog will send some code, you should be able to implement the Code coloring function like csdn or cnblogs.

Additional content:

The Code coloring function of the csdn blog has never been good, and I cannot find the cause myself, but it cannot make the original code snippets of the blog so ugly. I have to find a solution temporarily. My practices and ideas are as follows:

We know that the csdn blog supports CSS and JavaScript perfectly, and the jquery framework is included by default. In this case, I ensure that the code in the original article does not need to be updated (it is troublesome to modify the original article. Besides, it is not allowed that the Code coloring FUNCTION OF THE csdn blog is good that day, and it will be changed back later ), therefore, I only write the following code in the Custom style and announcement configured in the blog.

Custom CSS style:

. Blogstory textarea,. blogstory. codebox { Width : 700px ; Background : # Eee ; Border : 1px solid # 8a8a8a ; Padding : 5px 10px ; Font-size : 13px ; Line-height : 1.5em }

Announcement:

$ ( " Textarea [name = 'code'] " ). Each ( Function (I ){
  VaR Linenum = $ ( This Pai.html (). Split ( ' \ N ' ). Length;
$ ( This ). ATTR ( ' Rows ' , Linenum );
  // $ (This ). after ('<Div class = "codebox"> '{}(this}.html (). replace (// G ,''). replace (// G ,''). replace (/\ n/g, '<br>') + '</div> ');
  // $ (This). Remove ();
});

The implementation idea is to use CSS to set a fixed width for the code box and make it look like a gray box.

The Script Function analyzes the number of lines in the code box, then reset the rows value in the original code <textarea Cols = "50" rows = "15" name = "code" class = "JavaScript"> (the calculation method here is not completely accurate, for example, when a long line appears, it is inaccurate, not perfect, but practical ). Have you noticed the comments in my script? This is my first try. Another method is to retrieve the content of the Code text box, it is then transferred to a newly generated <Div class = "codebox">, and then $ (this) is used ). remove () removes the original text box, but the long-line code is incomplete.

The implementation result is as follows:

Is it similar to the code snippet style of the blog garden, but I don't have the code keyword highlighting effect here. Note that the gray box you see above is still the original multi-line text box. You can try placing the cursor focus inside and you will be able to change the content (this is a feature of the text box ), in addition, you can press Ctrl + A to select only the code in the current box, instead of the entire webpage. This is the first option for the time being.

source code download: syntaxhighlighter demo.rar