Jquery syntax dynamic syntax coloring sample code

Unpack the jquery - syntax - 3.1.1.zip, put our own public directory, in a web page into the following three js (download address is http://download.csdn.net/detail/liumengcheng/7344667)

 
<script type="text/javascript" charset="UTF-8" src="scripts/jquery-1.8.2.js"></script> 
<script type="text/javascript" charset="UTF-8" src="public/jquery.syntax.js"></script> 
<script type="text/javascript" charset="UTF-8" src="public/jquery.syntax.cache.js"></script> 

HTML part:

 
<div id="div_configXML" style="float:right;width:600px;"> 
</div> 

Js:

 
//The default type of the configuration file is XML
var fileType="xml"; 
//When a file in the middle tree is selected
$('#tree1').tree({ 
onClick: function(node){ 
if (node.children==null || node.children==undefined){ 
var url="../hub/config/configRead?"+'ip='+ip+'&port='+port+"&file="+node.id; 
var str=node.id; 
fileType = str.substring(str.lastIndexOf(".")+1,str.length); 
fileType=fileType.toLowerCase(); 
$.get(url,{},function(data,textStatus){ 
//Because it requires multiple syntax colorings, and the files selected are different each time,

//So every time you delete the original pre element and add pre, and the syntax has to be generated dynamically according to the suffix of the file name.

//Note: don't position the pre directly, because the pre element disappears after every render, so I'm going to put the pre in a div, and every time I clean up the pre, I'm just going to delete everything under the div
$("#div_configXML *").remove(); 
var $pre=$("<pre id='configXML' class='syntax "+fileType+"'> </pre>"); 
$("#div_configXML").append($pre); 
$("#configXML").text(data); 
$.syntax(); 
} 
); 
} 
} 

}); 

The following is the effect picture:

Display XML file
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405141731137.gif? 2014414173125 ">  
Display Java files
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405141731518.gif? 201441417323 ">