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 :
<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 :)
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 :)
No comments:
Post a Comment