Syntaxhighlighter code highlighting plug-in

Syntaxhighlighter is an open-source project on Google Code. It is mainly used to color code on webpages,

It is easy to use and has good results, and supports almost all common languages.

Procedure:

1. Download and decompress syntaxhighlighter (http://download.csdn.net/detail/itmyhome/7757359) current version 3.0.83

Ii. Introduce files

Copy the decompressed scripts and styles folders to the project, and introduceShcore. jsAnd core CSS filesShcore.css

Next, introduce the JS language you want to highlight. For example, to highlight Java, you must introduce shbrushjava. js in the scripts folder.

Finally, the highlighted theme CSS is introduced. The default value isShthemedefault.css

3. the following uses HTML code highlighted as an example.

After introducing JS and CSS files, write the following code:

JavaScript code:

<SCRIPT type = "text/JavaScript"> syntaxhighlighter. defaults ['toolbar'] = false; // remove the question mark icon syntaxhighlighter in the upper right corner. config. tagname = 'pre'; // you can change the default tag for parsing. Syntaxhighlighter. config. bloggermode = true; syntaxhighlighter. config. stripbrs = true; syntaxhighlighter. All (); </SCRIPT>

HTML code:

<PRE class = "Brush: HTML; "> <Table> <tbody> <tr> <TD> Hello </TD> <TD> syntaxhighlighter </TD> </tr> <TD> Code </ TD> <TD> light up </TD> </tr> </tbody> </table> </PRE>

Note: The HTML code is displayed in the <PRE> </PRE> label. By default, syntaxhighlighter automatically searches for the </PRE> label.

The labels can be customized, such as <div> and <p>. You only need to modify the following configuration code:

Syntaxhighlighter. config. tagname = 'div ';

At the same time, choose different format brushes for the root category class name. The preceding example uses HTML. Therefore, the format brush configuration is class = "Brush: HTML ;"

Effect

If the scroll bar appears on the right

Solution:

Find the shcore.css file and find

.syntaxhighlighter table {   width: 100% !important;}

To:

.syntaxhighlighter table {   width: 100% !important;   margin: 1px 0 !important;}

Project demo source code download: http://download.csdn.net/detail/itmyhome/7757359

Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/38517737