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:
- Include prettify.css stylesheet in your tag.
- Put your code snippets inside
tags.
- Include prettify.js javascript file right before the closing tag.
- Call prettyPrint on window.load event to initialize the syntax highlighter.
GeeksWithBlogs.net Configuration
- Go to Options –> Configure in your GWB admin section.
- Choose your favorite syntax highlighting theme from.
- 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} }
- In the Static News/Announcement textbox, copy and paste this
- 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 CDN
.