I decided to integrate some code highlighting into my blog rather than taking screen captures of my code and posting those into the blog. As I found this requires integrating a code inserting plug-in for TinyMCE 3.x to insert code into the editor and format it properly and syntax highlighting extension for the actual posted code. The two I chose were:
David Pokluda’s Windows Live Writer Source Code Plug-in found here. I simply took the BlogEngine.NET bits from the download and followed the instructions to install it. This download also included Alex Gorbatchev’s syntax highlighter - v. 2.0.296 – found here. The idea is there is a BlogEngine.NET extension that writes the SyntaxHighlighter js code to the pages.
And the code inserting plug-in for TinyMCE v3.x I got from Nawaf’s Blog found here.
I had to do some tweaking to get the TinyMCE plug-in to work the way I wanted. By default the plug-in wraps the code in a HTML textarea along with some attributes (settings) in the class attribute. I really don’t like that approach (having a textarea in a post and or the TinyMCE editor when editing). So I ended up changing the plug-in code to output a HTML pre tag and mapping some of the settings from the plug-in to the settings of the syntax highlighter code since Alex Gorbatchev’s code looks for a pre tag anyway.
The changes I made to the plug-in were in the codehighlighting\js\codehighlighting.js file and these are the changes I made:
function Save_Button_onclick() {
var lang = document.getElementById("ProgrammingLangauges").value;
var code = WrapCode(lang);
code = code + document.getElementById("CodeArea").value;
code = code + "</pre>";
if (document.getElementById("CodeArea").value == '')
{
tinyMCEPopup.close();
return false;
}
tinyMCEPopup.execCommand('mceInsertContent', false, code);
tinyMCEPopup.close();
}
function WrapCode(lang) {
var options = "auto-links: true; first-line: 1; light: false; ruler: false; smart-tabs: true; tab-size: 4;brush: " + lang + ";";
var html = "";
if (lang == 'js' || lang == 'jscript' || lang == 'javascript')
options = options + "html-script: true;";
else
options = options + "html-script: false;";
if (document.getElementById("nogutter").checked == true)
options = options + "gutter: false;";
if (document.getElementById("collapse").checked == true)
options = options + "collapse: true;";
if (document.getElementById("nocontrols").checked == true)
options = options + "toolbar: false;";
html = "<pre class='" + options + "'>";
return html;
}
function Cancel_Button_onclick() {
tinyMCEPopup.close();
return false;
}
As you can see most of the changes were to the WrapCode function (if you compare the original to my version side by side). Other than that nothing really needed to be done to the syntax highlighter code or the BlogEngine.NET extension.
Instructions for installation can be found on each respective website.
Note: There is a bit of weirdness with the TinyMCE plug-in where if there is HTML tags in your code you will need to manually encode them, I am not sure what is going on but I find it's not that much of a big deal.
Enjoy