There are several different tools freely available such as SyntaxHighlighter, highlight.js and Prettify which I decided on using.
This is how to add Prettify support to your blogger.com blog:
From the blog overview, click the Template menu item:
Click the Edit HTML button to open the template markup in a lightbox:
Find the </head> closing tag (ctrl+f, and search for </head>)
Right above the </head> closing tag, paste the following:
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></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(prettyPrint); </script> <style type="text/css"> pre.prettyprint { margin-top:10px; margin-bottom:10px; padding:5px; border:1px solid #888; overflow:auto; width:auto; max-height:350px; } .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; } @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>
The styles and colors can of course be changed according to your liking. The original styles can be found here
Don't forget to save the template changes:
How to use Prettify once integrated
To highlight some code, just put it inside <pre class="prettyprint"></pre>. Prettify will actually auto detect the programming language but that detection will put some extra strain on the client. For this reason it is better to define the language (in this case javascript) like this:
<pre class="prettyprint lang-js"></pre>
There are a number of built in languages available such as C (lang-c), C++ (lang-cpp), C# (lang-cs), HTML (lang-html), Java (lang-java), javascript (lang-js) and XML (lang-xml). There are also a number of extensions available for other languages.
<pre class="prettyprint lang-cs linenums"></pre>
For even more functionality and more supported languages consult the Prettify FAQ.
No comments:
Post a Comment