Tuesday, November 15, 2011

A few words on syntax

I have wanted to get some really easy out-of-the-box setup to color the syntax in the code.
After all, most of the posts on this blog are about code.
Google provides a nice easy solution: google-code-prettify.
Here is a step by step:
1) Include the following files from the Google SVN repo:
<link href=
    "http://google-code-prettify.googlecode.com
    /svn/trunk/src/prettify.css" 
    type="text/css" rel="stylesheet" />
<script type="text/javascript" 
    src="http://google-code-prettify.googlecode.com
    /svn/trunk/src/prettify.js"></script>
2) Add an on-load to the body of the html:
onload="prettyPrint()"
3) Any time you write code, use the following tags:
<pre class="prettyprint lang-html">
    <!-- Hey, look, this is a nice little comment. 
    I should have more of these in my code! -->
</pre>
Note that the new dynamic layouts do not allow you to modify HTML directly, so I ended up going with the old layouts.
Also, this tool by Dan Cederholm has helped me enormously.

No comments:

Post a Comment