JQuery geshi

Wednesday, March 17th, 2010

Code highlighting using ajax with jquery and geshi

  1. $(document).ready(function(){
  2.  
  3.         // Initialise highlighting
  4.         if($('pre').length){
  5.                 $('pre').each(function(){
  6.                         highLight($(this));
  7.                 });
  8.         }
  9.  
  10. });
  11.  
  12. // Highlight item
  13. function highLight(thisItem){
  14.         snippet  = thisItem.html();
  15.         snippet = snippet.replace(/&/ig, escape('&'));
  16.         snippet = snippet.replace(/&lt;/ig, '<');
  17.         snippet = snippet.replace(/&gt;/ig, '>');
  18.         language = thisItem.attr('class');
  19.         $.ajax({
  20.                 type: "POST",
  21.                 url: '/scripts/highlight.php',
  22.                 data: 'language='+language+'&snippet='+snippet,
  23.                 dataType: "html",
  24.                 success: function(msg){
  25.                         if (msg){
  26.                                 msg = msg.replace('&amp;', '&');
  27.                                 thisItem.after(msg);
  28.                                 thisItem.hide();
  29.                         }
  30.                 }
  31.         });
  32. }

Display clean javascript code for copying

$(document).ready(function(){

	// Initialise highlighting
	if($('pre').length){
		$('pre').each(function(){
			highLight($(this));
		});
	}

});

// Highlight item
function highLight(thisItem){
	snippet  = thisItem.html();
	snippet = snippet.replace(/&amp;amp;/ig, escape('&'));
	snippet = snippet.replace(/&lt;/ig, '<');
	snippet = snippet.replace(/&gt;/ig, '>');
	language = thisItem.attr('class');
	$.ajax({
		type: "POST",
		url: '/scripts/highlight.php',
		data: 'language='+language+'&snippet='+snippet,
		dataType: "html",
		success: function(msg){
			if (msg){
				msg = msg.replace('&amp;', '&');
				thisItem.after(msg);
				thisItem.hide();
			}
		}
	});
}

Tags: , , Posted in Web development