Formatting code snippets for blogging on Blogger
I've created a blog post entry which explains how to add code syntax highlighting to blogger using the syntaxhighlighter 2.0
Here's my blog post:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
I hope it helps you guys.. I'm quite impressed with what it can do.
Above Links stopped working. Try using http://hilite.me/
This css script might be useful to all - It is not for syntax highlighting but works well for presenting the source code in original format :
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000; background-color: #eee;
font-size: 12px; border: 1px dashed #999999;
line-height: 14px; padding: 5px;
overflow: auto; width: 100%">
<code style="color:#000000;word-wrap:normal;">
<<<<<<<YOUR CODE HERE>>>>>>>
</code>
</pre>
How to use :
- Paste this snippet in text editor,
- paste your code in <<<<<<>>>>>> block.
- Copy all and
- paste to HTML view in blogger(or any other) post editor.
BENEFITS : Simple and easy to use, less configuration, easy to reconfigure, no extra software
For my blog I use http://hilite.me/ to format source code. It supports lots of formats and outputs rather clean html. But if you have lots of code snippets then you have to do a lot of copy paste. For formatting Python code I've also used Pygments (blog post).
Easiest way to share code is with a public gist. Just write one up and paste in the embed code. Easy peasy.
http://gist.github.com
To address the search engine issue, one can use hidden div
on the page as simple as:
<div style="display:none"> content </div>