Google Code Prettify for geekswithblogs.net

January 2, 2013 · 2 min read

This blog post is based on the information I found from this blog post https://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 https://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 tag.
  2. Put your code snippets inside 
     tags.
  3. Include prettify.js javascript file right before the 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.
  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} }

  1. In the Static News/Announcement textbox, copy and paste this
  1. The addLoadEvent function is by because I need to call prettyPrint function on window.load event.

Important Note

As you noticed, I link the Prettify library directly from 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 CDNWinking smile.

This article is part of the GWB Archives. Original Author: Soe Tun

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.