Social Networks

In this tutorial I will describe step by step how to syntax highlighting using CSS JavaScript. While writing tutorial or sample code most common requirement is highlighting the syntax in script. Using JavaScript and CSS easily this can be achieve even in a simple HTML page.

Download Source

Demo

I have used prettify.js JavaScript and prettify.css CSS file for highlighting the syntax in code. You can use this syntax highlighter in any WordPress, HTML, ASP.NET or any web based project.

highlighting-syntax-css-js

 HTML Code

Link prettify CSS file in HEAD section

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>

Calling the PreetyPrint() function

<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>

Complete Script

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/dessert.css" />
</head>
<body>
<pre class="prettyprint">
<script type="text/javascript">
$(document).ready(function(){
function last_msg_funtion() 
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,
function(data){
if (data != "") {
$(".message_box:last").after(data); 
$('div#last_msg_loader').empty();
});
}; 
$(window).scroll(function(){
if  ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
}); 
});
</script>
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>

 

  1. Dragon City Hack 2013 says:

    Quality content is the main to interest the users to pay a visit the web site, that’s what this site is providing.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>