Jquery syntax dynamic syntax coloring sample code

  • 2020-03-30 02:56:55
  • OfStack

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;"> 

//The default type of the configuration file is XML
var fileType="xml"; 
//When a file in the middle tree is selected
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); 
//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>"); 


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 ">

Related articles: