How to configure google prettify.js to blogger

Thursday, August 21, 2014

Adding prettify.js to your blogger is very simple. Go to your blogger.com page then login, Template>Edit HTML>then search for the </head> tag and paste the below code before to it.
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js" type="text/javascript"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>

<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>
Done..1st part is completed. Then while you post html or java or some code snippet in your blogger you should use the code tag to insert java or c or html code inside these tags.. Copy the below code snippet and paste it in your blog posts.Before putting your java code you can parse it and paste the java code into the pre tags. Parse your java code here: http://www.blogcrowds.com/resources/parse_html.php
<pre class="prettyprint">
your code here......
</pre>
Check your updated post with the code and change the css styles as you need. Below is the test code to run the prettify.jsp
import java.util.HashSet;
class ConvertHashSettoArray{ 
  public static void main(String[] args) {
     // Create a HashSet
     HashSet hset = new HashSet();
 
     //add elements to HashSet
     hset.add("Element1");
     hset.add("Element2");
     hset.add("Element3");
     hset.add("Element4");
 
     // Displaying HashSet elements
     System.out.println("HashSet contains: "+ hset);
 
     // Creating an Array
     String[] array = new String[hset.size()];
     hset.toArray(array);
 
     // Displaying Array elements
     System.out.println("Array elements: ");
     for(String temp : array){
        System.out.println(temp);
     }
  }
}

0 comments:

Post a Comment

  © MyClipta Reserved by myclipta.blogspot.com 2009

Back to TOP