December 1, 2011

Prettify Syntax Highlighter

Tutorial Used

  1. Syntax Highlighter for Blogger

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');
});
Labels: ,