Adding code in Blogger

Since I plan on posting a lot of PowerShell snippets, I figured it would be a good idea to figure out a good way to post the code. Plain text can be boring and difficult to format (let alone read). After a little Google-Fu, I decided to use SyntaxHighlighter by Alex Gorbatchev.

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
SyntaxHighlighter in action looks like this:

# WMI query to list all properties and values of the Win32_BIOS class
 
Param(
    [string]$strComputer = "."
)
 
$colItems = get-wmiobject -class "Win32_BIOS" -namespace "root\CIMV2" -computername $strComputer
foreach ($objItem in $colItems) {
    write-host "Name                           :" $objItem.Name
    write-host "Version                        :" $objItem.Version
    write-host "Manufacturer                   :" $objItem.Manufacturer
    write-host "SMBIOSBIOS Version             :" $objItem.SMBIOSBIOSVersion
    write-host 

}

Implementation is pretty easy.

1. Login to Blogger and go to the overview for the blog you want to implement in
2. From the left menu, click Template
3. Click the Edit HTML button
4. It would be a good idea to copy the entire code and save it as a backup
5. Locate the </head> tag and insert the below just before it
   

   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   <script language='javascript'>
       SyntaxHighlighter.config.bloggerMode = true;
       SyntaxHighlighter.defaults['toolbar'] = false;
       SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
       SyntaxHighlighter.all();
   </script>
   

6. Click the Save Template button

To add code to your blog:

1. Create a new post and switch to HTML mode
2. Add the below code:
   

   <pre class="brush:powershell">
   </pre>
   

3. Paste your PowerShell code between the <pre> tags and you are done

I used "brush:powershell" because the code will be PowerShell. There are several other brushes available but you'll need to add the appropriate <script> tags in the Blogger template. I only added PowerShell, Css, Plaintext, and Xml. I'm actually using the Xml (also does Html) brush in some of the code blocks on this post.

Happy Blogging!