Inserting code block snippets to blogger posts

Hi All,

Today i will show you how do i insert code block snippets in my blogger blogposts
 To insert code snippets in my blog I have used below option.

Using Syntax Highlighter from Alex Gorbatchev

Steps
1.    Go to your blogger blog dashboard
2.    Go to theme
3.    Take backup of your existing template
4.    Click Edit HTML
5.    Find the

tag and insert the following lines just before and save it

Note: In my case I have kept only PowerShell Brush enabled and rest are commented

<!-- Syntax Highlighter START -->
<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/shThemeEmacs.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/shBrushAS3.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushDelphi.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.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/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" /> -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />

  
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter END -->

Creating post with code snippets
Now you are ready to insert the code to be viewed as code snippets.
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 i have used 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-service

</pre>

As a result this code block will apear on your screen as below

get-service

You can also show your script results similar to the actual one as shown below.

Status   Name               DisplayName                           
------   ----               -----------                           
Stopped  AJRouter           AllJoyn Router Service                
Running  ALG                Application Layer Gateway Service     
Running  AppHostSvc         Application Host Helper Service       
Stopped  AppIDSvc           Application Identity                  
Running  Appinfo            Application Information               
Stopped  AppMgmt            Application Management                
Stopped  AppReadiness       App Readiness                         
Stopped  AppXSvc            AppX Deployment Service (AppXSVC)     
Stopped  aspnet_state       ASP.NET State Service                 
Running  AudioEndpointBu... Windows Audio Endpoint Builder        
Running  Audiosrv           Windows Audio                         
Running  AVP                Kaspersky Endpoint Security Service   
Running  avpsus             Kaspersky Seamless Update Service     
Stopped  AxInstSV           ActiveX Installer (AxInstSV)          
Stopped  BDESVC             BitLocker Drive Encryption Service    
Running  BFE                Base Filtering Engine                 
Running  BITS               Background Intelligent Transfer Ser...
Running  BrokerInfrastru... Background Tasks Infrastructure Ser...
Running  Browser            Computer Browser                      
Stopped  BthHFSrv           Bluetooth Handsfree Service           
Stopped  bthserv            Bluetooth Support Service             
Running  CcmExec            SMS Agent Host                        
Stopped  CDPSvc             Connected Device Platform Service     
Running  CertPropSvc        Certificate Propagation               
Running  ClickToRunSvc      Microsoft Office Click-to-Run Service 

Are you excited to know how did i get this PowerShell output including it there are few other options are also available which I will post soon.

Kindly Share your experience in comment section with my blog/post if it did help you !!

Stay Blessed!!  
Thank You!!