Code highlight plug-in syntaxhighlighter

CodeHighlight plug-inSyntaxhighlighter

Current versionSyntaxhighlighter_2.1.364

• First

Decompress the package,ScriptsThe folder containsJSFile, inStylesThe folder contains various highlighted topics.

• Second

How to use it? First, introduce its core Javascript File Shcore. js And core CSS File Shcore.css , These two are required. Next, introduce the language you want to highlight. JS For example, what I want to highlight is C # , Must be introduced in Scripts Folder Shbrushcsharp. js , Finally, a highlighted topic is introduced. CSS , The default value is Shthemedefault. cSS

• Third

Highlighted belowJavascriptThe code is used as an example.

IntroductionJSAndCSSAnd then write the relevant code on the page.

JavascriptCode:

<Script Type= "Text/JavaScript">

Syntaxhighlighter. config. clipboardswf ='Scripts/clipboard.swf';

Syntaxhighlighter. All ();

</Script>

HtmlCode:

<Pre Class= "Brush: javascript;">

VaR mycustomfn = function showfn (){

Ext. msg. Alert ('Message Box ', "you have called the JavaScript function of the client ");

}

pre >

note: HTML the code is displayed as

   medium,   syntaxhighlighter   automatically searches for   
   tag, which can be customized or   
   
 
  
    ,  
     
     
  
 ,   
   
  and so on. You only need to add the following configuration code:  
    
 
   
 
  
   
 

Syntaxhighlighter. config. tagname = 'div ';

At the same time, different format brushes are selected for the root category class names. Because Javascript is used as an example, the format brush configuration is JavaScript, as shown in the following code: class = "Brush: javascript ;"

• Fifth

When you move the cursor to the code area, a toolbar is displayed, showing the code, copying the code, printing the code, and helping. The four functions are displayed by default in English. The Chinese setting is as follows:

<Script Type= "Text/JavaScript">

Syntaxhighlighter. config. clipboardswf ='Scripts/clipboard.swf';

Syntaxhighlighter. config. Strings = {

Expandsource:'Expand the code',

Viewsource:'View the code',

Copytoclipboard:'Copy the code',

Copytoclipboardconfirmation:'Code copied successfully',

Print:'Print',

Help:'? ',

Alert:'Syntax highlight \ n \ N',

Nobrush:'The brush cannot be found :',

Brushnothtmlscript:'HTML-script option not configured for the brush',

Aboutdialog:'<Div> </div>'

};

Syntaxhighlighter. All ();

</Script>

See the final results:

Finally, the plug-in:/files/meiqunfeng/code high-brightness plug-in syntaxhighlighter_2.1.364.zip

 

2009-11-23