The de facto standard of syntax highlighting of source code in a browser is a java script library called SyntaxHighlighter. The really nice thing about this tool is that the source code formatting is completely done by the browser. In addition the source code can be basically just copy-and-pasted into the page’s html. The usage is very simple and the results very impressive. This is the first step towards computer aided blog authoring.

In this blog post I describe the procedure for setting up BlogEngine.NET 1.5 with the SyntaxHighlighter java script library. And in the second part I demonstrate how to use SyntaxHighlighter from the different blog authoring tools:

• Online TinyMCE
• Windows Live Writer
• Editing the post xml file with your favorite text editor

SyntaxHighlighter installation

Step 1: Download the library

Download the files from here syntaxhighlighter_2.0.320.zip

Step 2: Copy files onto your server

Unzip the archive, create a folder called SyntaxHighlighter underneath the BlogEngine.Web (root) folder and copy the unzipped files into this folder:

Figure 1: Unzipping files and deploying them into the syntaxhighlighter folder in the root of your BlogEngine.NET application

Step 3: Change the BlogEngine.NET settings

Now login into your BlogEngine.NET website as Administrator and go to the settings configuration page. Copy and paste the following declarations into the HTML head section text box.

Figure 2: HTML head section text box of the BlogEngine.NET settings page

<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushColdFusion.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushErlang.js"></script>
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Adding code snippets to your html

A general description about how to add code blocks and how to tweak the configuration for different syntaxes (programming languages) can be found on the Usage page and on the Brushes page.

Because of the design of HTML/XML, it is impossible to use left angle bracket "<" characters un-escaped. This character causes browsers to interpret the following text as XML tags, which can completely break your highlighted block or even the whole page. Please make sure to replace all instances of < with &lt;

The safest way is to first html encode your code snippet and then use the encoded text in your page.

Here is a list of available syntaxes, which are referred to as “brushes” in the SyntaxHighlighter library:

Creating code areas using BlogEngine.NET’s online editor

The online editor doesn't format the source snippets correctly, even with the encoded html.

Creating code areas using Windows Live Writer

Go into View-Source mode to see the raw html. (Shift + F11).

Figure 3: Switching Windows Live Writer into the Source Mode

Then add a pre html element with the brush= attribute.

Figure 4: Adding the pre tag and specifying the brush attribute

Insert the html encoded code snippet in the next step.

Figure 5: Copy and paste the encoded code snippet between the pre tags

Publish the blog post and the result will look like the following code snippet:

#Run unit tests in current script file
function Global:Run-CurrentTestFile
{
    PSUnit.Run.ps1 -PSUnitTestFile $($psISE.CurrentFile.FullPath) -ShowReportInBrowser
}

$psISE.CurrentPowerShellTab.AddOnsMenu.SubMenus.Clear()
# Add an Add-ons menu with an accessor.
# Note the use of “_”  as opposed to the “&” for mapping to the fast key letter for the menu item.
$PSUnitMenu = $psISE.CurrentPowerShellTab.AddOnsMenu.SubMenus.Add("_PSUnit",$null, $null) 
$ExecuteTestSubMenu = $PSUnitMenu.SubMenus.Add("E_xecute Unit Tests", {Run-CurrentTestFile}, 'Ctrl+SHIFT+X')

The following two examples show XML with the XML brush and the text brush.

This is how it looks in the XML file for this post (xml brush)

  
<pre class="brush: xml">  
<categories>
    <category>a2866a65-b7aa-48bb-87b6-2ad9832d0055</category>
    <category>75ed88c5-078b-441a-bf30-c412b2989c94</category>
    <category>5fa94be1-16f7-4ed6-a2f9-890c641d9fbb</category>
</categories></pre>

This is how it looks in the XML file for this post (text brush)

<pre class="brush: xml">  
<categories>
    <category>a2866a65-b7aa-48bb-87b6-2ad9832d0055</category>
    <category>75ed88c5-078b-441a-bf30-c412b2989c94</category>
    <category>5fa94be1-16f7-4ed6-a2f9-890c641d9fbb</category>
</categories></pre>

Creating code areas by directly editing the BlogEngine.Net post XML files

You can use the following PowerShell script to HTML-encode your source code string or file. Then copy the encoded text directly into the appropriate location of your BlogEngine.NET post XML file. This, of course is a task that could be automated by a script.

$XMLString = `
@"
<div>Hello</div>
"@

function Encode-Html([string] $StringToEncode)
{
    $AssemblyLoaded = $false
    try
    {
        $SystemWebAssembly = [Reflection.Assembly]::LoadFrom("C:\windows\assembly\GAC_64\System.Web\2.0.0.0__b03f5f7f11d50a3a\System.Web.dll")
        $AssemblyLoaded = $true
    }
    catch
    {
        Write-Debug "C:\windows\assembly\GAC_64\System.Web\2.0.0.0__b03f5f7f11d50a3a\System.Web.dll not found!"
    }
    
    if(!$AssemblyLoaded)
    {
        try
        {
            $SystemWebAssembly = [Reflection.Assembly]::LoadFrom("C:\windows\assembly\GAC_32\System.Web\2.0.0.0__b03f5f7f11d50a3a\System.Web.dll")
        }
        catch
        {
            Write-Debug "C:\windows\assembly\GAC_32\System.Web\2.0.0.0__b03f5f7f11d50a3a\System.Web.dll not found!"
        }
    }
    $HtmlEncodedErrorRecordString = [System.Web.HttpUtility]::HtmlEncode($StringToEncode)
    return $HtmlEncodedErrorRecordString
}

function Encode-HtmlFile([String] $FileToEncode, [String] $EncodedFile)
{
    if(Test-Path $FileToEncode)
    {
        Get-Content -Path $FileToEncode -Encoding "UTF8" | ForEach-Object { Encode-Html $_ } | Add-Content -Path $EncodedFile -Encoding "UTF8"        
    }
    else
    {
        throw "$FileToEncode not found!"
    }
}

$EncodedString = Encode-Html -StringToEncode $XMLString
$EncodedString > Result.txt
& ./Result.txt

Encode-HtmlFile -FileToEncode Html-Encode.ps1 -EncodedFile Result2.txt
& ./Result2.txt

Ausblick

This blog post describes how to install and use the SyntaxHighlighter java script to color format your source code snippets. It also features a PowerShell script that does html encoding.