For programmers, testers and tech geeks

Write your own jquery plugin for syntax Heighlighting

I got some free time during holidays , so I decide to write my own syntax highlighter to beautify my code on html pages, its first version is done and pushed on my github account right here :
https://github.com/Usman-uzi/UCodeHighlighter.

To use this you must follow following four steps :
1) First include scripts and style sheet in header of your page :

<head>
<title>jQuery plugin: code highlighting demonstration</title>
<script src="published/jquery-1.6.3.min.js"></script>
<!--<script src="published/UCodeHighlightner.js"></script>
<script src="script/uhighlight.js"></script>
<link href="published/hilightstyle.css" type="text/css" media="screen" rel="stylesheet">-->
<script src="http://www.usmanbackup.somee.com/script/UCodeHighlightner.js"></script>
<link href="http://www.usmanbackup.somee.com/script/hilightstyle.css" type="text/css" media="screen" rel="stylesheet">

</head>

2) Second step is , place you code in a <div > with display none , i.e.

<div id="data" style="display:none;" >

your code here........

</div>

3) Third step must be , use following chunck of code on your page:

<div>
<div id="line_number" class="counting_div_wrap"></div>
<div id="main" class="main"></div>
<div style="clear:both;"></div>
</div>


4) The last step is to use js to process your code i.e.

<script type="text/javascript">
// script for on page code processing
$("#main").highlight($("#data").html(),$("#line_number")); 
</script>


That's all , you are done :)