Geeks With Blogs
Soe Tun my attempt to solve common tech problems

This blog post is based on the information I found from this blog post http://geekswithblogs.net/wesm/archive/2009/11/13/syntaxhighlighter-with-subtextgwb.aspx.

I find it very difficult and tedious to manually format the sample code snippets when writing blog posts on GWB.net since it doesn't have a good built-in syntax highlighting support.
The built-in rich-text editor is cumbersome and it gets in the way while I am writing and thinking.
As a side note, I prefer the WordPress text editor because it stays out of your way and lets you focus on writing your blog post with great user-experience for including images and captions.

GWB includes CSS styles from Manoli Code Formatter at this URL http://geekswithblogs.net/skins/_System/csharp.css.
However, it is quite limited and supports only a few languages (C#, VB, T-SQL).

Google Code Prettify

Setting up Prettify is quite easy.  Here is a good tutorial on how to use it. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

The basic usage:

  1. Include prettify.css stylesheet in your <head> tag.
  2. Put your code snippets inside <pre class=”prettyprint”> tags.
  3. Include prettify.js javascript file right before the </body> closing tag.
  4. Call prettyPrint() on window.load event to initialize the syntax highlighter.

GeeksWithBlogs.net Configuration

  1. Go to Options –> Configure in your GWB admin section.
  2. Choose your favorite syntax highlighting theme from http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html.
  3. Copy-and-paste the CSS style below into the Custom CSS textbox.  I customized the Sons of Obsidian theme as below for extra margin & padding around the code block.
    /* son of obsidian - google prettify */
    .str{color:#ec7600} .kwd{color:#93c763}
    .com{color:#66747b} .typ{color:#678cb1}
    .lit{color:#facd22} .pun{color:#f1f2f3}
    .pln{color:#f1f2f3} .tag{color:#8ac763}
    .atn{color:#e0e2e4} .atv{color:#ec7600}
    .dec{color:purple}
    pre.prettyprint{border:0 solid #888;font-family:Consolas,"Courier New",monospace}
    ol.linenums{margin-top:0;margin-bottom:0}
    .prettyprint{background:#000;margin-top:10px;margin-bottom:25px;padding:20px 0 20px 10px}
    li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}
    li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}
    
    @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}
    }
  4. In the Static News/Announcement textbox, copy and paste this
    <script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
    <script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
    
    <script type="text/javascript" language="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>
  5. The addLoadEvent function is by http://simonwillison.net/2004/may/26/addloadevent/ because I need to call prettyPrint() function on window.load event.

Important Note

As you noticed, I link the Prettify library directly from http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js since I cannot upload a file onto GWB.
If Google stops serving the file from the URL, this will basically not work anymore.

Maybe we should pester Google to host the Prettify library on the Google Ajax API CDN Winking smile.

Posted on Wednesday, January 2, 2013 6:08 PM Tips , Tools | Back to top


Comments on this post: Google Code Prettify for geekswithblogs.net

# re: Google Code Prettify for geekswithblogs.net
Requesting Gravatar...
This is just a nice process to try. It will be significant. - Morgan Exteriors
Left by Brad Fonnoley on Aug 25, 2016 7:33 AM

Your comment:
 (will show your gravatar)


Copyright © Soe Tun | Powered by: GeeksWithBlogs.net