Blogger - Adding PowerShell code in your blog post

From time to time you might be interested to have your code syntax highlighted or presented with a neat format in your blog posts.

Plain text is boring and it can really mess up the layout of your post. Also It can be very hard to understand some code without some sort of syntax highlighting.





Here are a few methods that I found useful for Blogger: (those can probably be applied to Wordpress and other platforms)

• Method 1: Using Syntax Highlighter from Alex Gorbatchev
• Method 2: Using an Editor to copy the code as HTML language
• Method 3: HTML CSS Rectangle (PowerShell console look a like)
• Method 4: Embedded code using Gist (GitHub)

Method 1: Using Syntax Highlighter from Alex Gorbatchev

Preview:

# Get the list of command with 'Get'
Get-Command -Verb Get
# Get the list of service with dependent services
Get-service -DependentServices
# Splatting
$Params = @{
    ComputerName  = "$env:ComputerName"
    Class         = "win32_OperatingSystem"
}

Configuration

1. Go to http://www.blogger.com/home and log in
2. Click the blog you are configuring
3. Click Template in the left menu
4. Click Edit HTML and the Proceed at the warning screen
5. Copy the whole code and save it as a backup
6. Find the </head> tag and insert the following lines just before and save it:

Inserting the code in your blog post
Now you are ready to insert the code to be highlighted.
Create a new post or Edit an existing one and switch the blog editor to HTML Mode

And add the following tag
<pre class="brush:powershell">
</pre>

The above example is for PowerShell hence the "brush:powershell". Use the appropriate brush for your code. Now just paste the code itself  inside the <pre> tag and you are done!

Example:
<pre class="brush:powershell">
Get-Process
</pre>

would give the following output:

Get-Process

Tips - Selecting the code
Double click anywhere inside the code window and  use Ctrl+C to copy it.

Tips - Adjusting the font size
The initial font size was a bit too big for me, so I did the following changes in the HTML configuration to make it smaller (see highlighted lines)

Method 2: Using an Editor to copy the code as HTML language.

In the following example, I use PowerShell Studio 2012, but this can also be done with some other editors.
For PowerGUI, check the following Script Editor Add-on.


Preview:

# Get the list of command with 'Get'
Get-Command -Verb Get
# Get the list of service with dependent services
Get-service -DependentServices
# Splatting
$Params = @{
    ComputerName  = "$env:ComputerName"
    Class         = "win32_OperatingSystem"
}

Example with PowerShell Studio 2012

Select your code and right click, select Copy HTML.

Now you are ready to insert the HTML code in your blog post.

Back to "COMPOSE" you can see the html is translated

Method 3: HTML CSS Rectangle

Preview:

# Get the list of command with 'Get'
Get-Command -Verb Get
# Get the list of service with dependent services
Get-service -DependentServices
# Splatting
$Params = @{
    ComputerName  = "$env:ComputerName"
    Class         = "win32_OperatingSystem"
}

Preview2:

PS C:\Users\Xavier> Get-Process svchost

Handles  NPM(K)    PM(K)      WS(K) VM(M)   CPU(s)     Id ProcessName
-------  ------    -----      ----- -----   ------     -- -----------
    599      25    31684      15904   109   304.72    464 svchost
    397      13     4104       4764    40    23.79    756 svchost
    510      16     6164       5712    45    73.79    864 svchost
    796      31    19144      12420   105    29.16    920 svchost
   2271     107   251640      35260   453 1,936.61    948 svchost
    920     141    15400       9632   149    17.71   1012 svchost
    896      50    22292      18468  1453    48.95   1128 svchost
    641      52    28764      15184   433    52.37   1516 svchost
    146      11     2352       1512    41     0.51   2076 svchost
    197      11     1848       1060    36     1.39   2532 svchost
    523      29     8872       6904    85    15.96   2752 svchost
     94       8     1696        480    22     3.53   2836 svchost


PS C:\Users\Xavier> Get-Service | Select-Object -First 1

Status   Name               DisplayName
------   ----               -----------
Running  AdobeARMservice    Adobe Acrobat Update Service


PS C:\Users\Xavier>

Configuration

1. Go to http://www.blogger.com/home and log in
2. Click the blog you are configuring
3. Click Template in the left menu
4. Click Customize
5. In the Blogger Template Designer, Click Advanced
6. Click on Add CSS
7. Copy the the following CSS code
8. Click Apply to Blog to finish

CSS Code

.PoshConsole {
  color: #EEEDF0;
  background-color: #012456;
  font-family: consolas;
  font-size: 0.99em;
  padding: .25em;
  padding-top: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.25em;
}

Inserting the code in your blog post
All you need to do now is add the following line with your code.

<pre class="PoshConsole">Get-Process</pre>

For example, simply copy the code from your PowerShell windows and insert into the brackets specified above

Copy the code from your powershell console

Method 4: Embedded code using Gist (GitHub)

"Gist is a simple way to share snippets and pastes with others. All gists are Git repositories, so they are automatically versioned, forkable and usable from Git."

https://gist.github.com/

Configuration

1. Insert your code and select PowerShell
2. Create a Secret or Public Gist.
3. Get the HTML code to embed the script in your post

#1 Insert the your PowerShell code and select the language PowerShell

#2 Create the Gist

#3 Copy the HTML code to embed the gist in your Blog post.

Example:



Thanks for Reading! If you have any questions, leave a comment or send me an email at fxcat@lazywinadmin.com. I invite you to follow me on Twitter: @lazywinadm