Keep Moving: blog

Thursday, August 18, 2011

Display HTML, Javascript and CSS in Blog

When we try to display some html, javascript and css code in our Blog, in stead of being treated as plain text, they are often rendered as a part of the blog code. The trick to display them is translating the tags into their aliases. For example, use < for '<' and > for '>'. If we want to display a line of code:

<button onclick="window.open('Download.psp?param=hello','mywindow');" type="button" >Download</button>

We need to put following code in our blog:

&lt;button onclick=&quot;window.open(&#039;Download.psp?param=hello&#039;,&#039;mywindow&#039;);&quot; type=&quot;button&quot; &gt;Download&lt;/button&gt;

The link to do this conversion is here

Monday, August 8, 2011

Code highlight in Blog

The most simple solution may be using googe-code-pretifier. It will load a javascript library when your blog is rendered and it's able to automatically detect the programming language and highlight your code properly.

add following two lines in your blog template:

<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'></script>

Add the javascript library to the 'body' tag in your blog template:

<body onload='prettyPrint()'>

wrap the code with pre tag:

<pre class="prettyprint"> ... # Your code goes here </pre>