13 February 2013

Highlight code in Blogger

This post is not related to the TraumaBot project itself.
I want to take a note on how to highlight the code in Blogger as I have neither html nor JavaScript knowledge and wasted a lot time on it.
Step 1:
In Blogger "Layout" -> "Add a Gadget" -> "HTML/JavaScript" :
Input the title box whatever you like. In content box, copy following codes:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
Step 2:
"Template" -> "Edit HTML" -> Ctrl+F (Find) <body> and change to:
<body onload="prettyPrint()">
Step 3:
In the post, when code highlight is required, convert to HTML edit mode and input your code between <pre class="prettyprint"> and </pre> such as:
<pre class="prettyprint">
    // add your code here
</pre>
More advanced usage will be updated later.

No comments:

Post a Comment