Blogger - Adding PowerShell code in your blog post

2013/10/07 | 4 minute read |

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 
* 
* Go to http://www.blogger.com/home and log in

* Click the blog you are configuring

* Click Template in the left menu

* Click Edit HTML and the Proceed at the warning screen

* Copy the whole code and save it as a backup

* Find the </head> tag and insert the following lines just before and save it:

</link>
</link>



```

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
</b>
</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 
 tag and you are done!

Example:
</b>
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)

</link>




```


### 



### 



### 



### 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 * * Go to http://www.blogger.com/home and log in * Click the blog you are configuring * Click Template in the left menu * Click Customize * In the Blogger Template Designer, Click Advanced * Click on Add CSS * Copy the the following CSS code * 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"></b>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/](https://gist.github.com/) Configuration * * Insert your code and select PowerShell * Create a Secret or Public Gist. * 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:

Leave a comment