Just about every technical article or blog that posts source code typically implements some kind of tool to render source code syntax highlighting for a variety of programming languages. The benefits of this are obvious, most importantly readability, followed by easy access to copy and paste snippets of source code without intermixing CSS and/or HTML markup. Although BlogEngine.NET 1.3 comes with an extension to highlight source code syntax, I prefer a tool called SyntaxHighlighter which is entirely CSS and JavaScript based and can be used within virtually any web application. SyntaxHighlighter uses JavaScript regular expressions to highlight syntax and it has been noted that with large blocks of code performance can be slow.
You can add source code using the CodeFormatterExtension that is available with BlogEnginge.NET 1.3 and utilizes bb style markup to generate the desired highlighted syntax. The CodeFormatterExtension makes it relatively easy to add source code to a post using the bb markup method, however the caveat to this is that it transforms the HTML output of your post by adding CSS class attributes to the code which is probably not an issue for most.
Install SyntaxHighlighter
To get started visit the Google Code project web site to download the latest release of SyntaxHighlighter. This post applies to the SyntaxHighlighter 1.5.1 release. After unpackaging the files I chose to rename the directory from "dp.SyntaxHighlighter" to "SyntaxHighlighter" and only uploaded the Scripts and Styles sub directories to the BlogEngine.NET root path. I chose to keep these sub directories within a SyntaxHighlighter parent directory only for organizational purposes, however it does not matter where you upload the files as long as you remember the paths so the stylesheet and scripts can be referenced. The Uncompressed subdirectory does not need to be uploaded as it is a copy of all of the JavaScript files before they were compressed or trimmed of white space in order to minimize the file sizes.
The next step is to sign in to your BlogEngine.NET account and within the Settings Control Panel add references to the SyntaxHighlighter stylesheet and scripts. The references can be added to either the HTML Head Section or the Tracking Script section and should be referenced using the full path, instead of relative paths. This will prevent any problems loading these files from all of the various locations within BlogEngine.NET.
For example:
In the Tracking Script section copy the following JavaScript, by adding the script to the bottom of the page this helps to ensure that the required stylesheet and script files have been loaded by the browser.
Posting source code within BlogEngine.NET using SyntaxHighlighter is accomplished by entering your code in HTML mode of the TinyMCE text editor that comes default with BlogEngine.NET. Simply wrap the source code in the following <pre name="code" class="c-sharp"> tags to achieve the following C# syntax highlighting:
public static string SayHello(string name)
{
return String.Format("Hello, {0}!", name);
}
The caveat with this is that the TinyMCE text editor "cleans up" and reformats your markup and ultimately removes the name="code" attribute that is required by SyntaxHighlighter. Without the name="code" attribute SyntaxHighlighter cannot apply the appropriate styles. By adding the name="code" attribute to the <pre> tags it also invalidates XHTML Strict implementations and therefore will not work with BlogEngine.NET themes such as "Leaves" or "Indigo" for example. This appears to be a limitation to the SyntaxHighlighter implementation.
Configure TinyMCE
The way to fix this is to modify the TinyMCE JavaScript to allow the name attribute for all <pre> tags. The TinyMCE script can be found in the BlogEngine.NET\admin\tiny_mce\tiny_mce.js or tiny_mce_src.js for the uncompressed script file. The valid_elements settings list in the init function should be modified to include the name attribute.
//valid_elements settings
-pre[class|align|style]
//changed to include "name" attribute, appears to invalidate xhtml strict but not transitional
-pre[class|align|style|name]
At this point SyntaxHighlighter should now be working, but before you upload the modified script file there is another modification that is required to prevent the removal of carriage returns. Within the formatHTML function the TinyMCE text editor removes carriage returns resulting in every line of source code within a <pre> tag running onto a single line.
//delete this line to allow carriage returns, within a pre tag this jumbles everything onto a single line
h = h.replace(/\r/g, ''); // Windows sux, isn't carriage return a thing of the past :)
Now the modified TinyMCE script can be uploaded and replaced and SyntaxHighlighter should be ready to highlight your code on XHTML Transitional pages.
Subscribe