Tutorial Used
CSS example:
This is a hybrid style, adopted CSS from Desert, Sunburst and some my own. You can use this also...
pre.prettyprint, code.prettyprint {
background-color: #333;
padding:5px;
color #fff;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
pre .nocode {
background-color: none;
color: #000
}
pre .str {
color: #FFC0CB
}
pre .kwd {
color: #f0e68c;
font-weight: bold
}
pre .com {
color: #87ceeb
}
pre .typ {
color: #98fb98
}
pre .lit {
color: #FFA07A
}
pre .pun {
color: #fff
}
pre .pln {
color: #fff
}
pre .tag {
color: #f0e68c;
}
pre .atn {
color: #bdb76b;
font-weight: bold
}
pre .atv {
color: #90EE90
}
pre .dec {
color: #98fb98
}
ol.linenums { /* IE indents via margin-left */
margin-top: 0;
margin-bottom: 0;
color: #AEAEAE
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { }
li.L1,li.L3,li.L5,li.L7,li.L9 { /* Alternate shading for lines */
background:#555;
}HTML Example:
Here is an another example of using the line numbers by adding
class="prettyprint linenums" to pre tag:<!DOCTYPE html>
<html>
<head>
<title>Prettify Demo and Source codes</title>
<link rel="stylesheet" href=" http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<pre class="prettyprint linenums">
$(document).ready(function() {
alert('I am using Prettify as Syntax Highlighter');
});
</pre>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>JavaScript Example:
$(document).ready(function() {
alert('I am using Prettify as Syntax Highlighter');
});
