Blogger code prettifier

Problem:

When posting code in blogger looks awful.

Solution:

There is a nice open source project that prettifies the posted code.

Download code

http://code.google.com/p/google-code-prettify/downloads/list
download prettify-small-21-Jul-2010.zip (or latest) (I includee the date so I remember when to update)
Extract to any folder you like on your disk.
open folder "prettify" and leave it open (will be needed soon)
Use Notepad++ for opening and copying minimized file content. Most editors mess long lines.

Create a Gadget in Blogger:

http://www.blogger.com
Layout
Add a Gadget (anywhere)
Basics
HTML/Javascript
Title: prettify (choose any title you like)
Content:

<style type="text/css">
===>insert contents of  prettify.css <===
</style>

<script type="text/javascript">
 ===> insert contents of prettify.js (do not use minified-does NOT work!) <===
</script>

I customize adding:
(Seems that blogger encloses post in a div with class="post" so that we can style it safely without changing the rest of the page.)

<style type="text/css">
.post .prettyprint { 
 border:1px dotted #666; 
 background-color:#ffc; 
 overflow:auto; 
}
.post .prettyprint ol.linenums li {
 list-style-type:decimal-leading-zero;
}
.post .nocode { 
 background-color:#fff; 
 border-right:1px dotted #666; 
} 
</style>

<script type="text/javascript>
 ===> insert contents of lang-css.js <===
 ===> insert contents of lang-sql.js <===
 ===> if needed insert contents of lang-*.js where * is apollo,hs,lisp,lua,ml,proto,vb,vhdl,wiki... <===
</script>

Modify Blogger Template:

Layout
Edit HTML
Click in template TextArea
find (^F) <body>
change to

<body onload="prettyPrint()" >

How to use:

Browsers display Tabs as 8 characters and not 4. So:
If you use Tabs in your source and Visual Studio 2010 then:

^A (Select All)
Edit > Advanced > Untabify Selected Lines
^C (Copy)
^Z (Undo Untabify)

Clipboard now contains untabified source.
Edit the code sample you want to post

change	to
<	<
>	>
&	&

In the post enter:

<pre class="prettyprint lang-html">
Paste edited (as above) code here
</pre>

We can replace html in lang-html with:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
The above languages are supported by default. You can add more if you include the corresponding js from src folder.

Numbering lines:

<pre class="prettyprint linenums:1">/* This is line 1 of my code
 * and here's line 2 */
print("I'm line number 3");
</pre>

gives (no, it doen't work- You have to go into prettify.css and delete everything about classes L0-L9:


li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee})

/* This is line 1 of my code
 * and here's line 2 */
print("I'm line number 3");

8 comments:

Юрий Рудаков05 August, 2010 03:52
Thanks a lot! Your post was very helpful for me.
Anonymous12 January, 2011 13:20
There is an error in your code; your missing closing double quotes in the opening tag of the script element. Thx for the tips!
pavlos12 January, 2011 15:47
Should be OK now. Thanks!
I'm happy you found it useful.
Anonymous18 November, 2011 12:18
Thanks for explaining this.
Unknown24 August, 2012 21:21
wat if...
i directly copy the source code to
blogger-design-edit html
Isa Guha18 January, 2017 11:46
Hi this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding knowledge so I wanted to get guidance from someone with experience. Any help would be greatly appreciated! Thanks in advance.

What is a Medical Website? And why doctors need it for their practice?
pavlos18 January, 2017 11:52
Yes, blogs use WYSIWYG editors or if you prefer you can code your post directly (as I do). But you have not. My experience stems from blogger.

Code reuse

prettify

baseline