prettify

baseline

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:
  1. ^A (Select All)
  2. Edit > Advanced > Untabify Selected Lines
  3. ^C (Copy)
  4. ^Z (Undo Untabify)
Clipboard now contains untabified source.
Edit the code sample you want to post
changeto
<&lt;
>&gt;
&&amp;
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");

6 comments:

  1. Thanks a lot! Your post was very helpful for me.

    ReplyDelete
  2. There is an error in your code; your missing closing double quotes in the opening tag of the script element. Thx for the tips!

    ReplyDelete
  3. Should be OK now. Thanks!
    I'm happy you found it useful.

    ReplyDelete
  4. Thanks for explaining this.

    ReplyDelete
  5. wat if...
    i directly copy the source code to
    blogger-design-edit html

    ReplyDelete
    Replies
    1. If it works for you...
      Most of the time we prefer color coding, identation etc.
      Plus escaping of some characters so they don't mess HTML.

      So try pasting your code. If you like what you see in preview, don't use any of these techniques. Otherwise...

      Delete