Changeable SyntaxHighlighter Theme on BlogEngine.NET using Extension
Alex Gorbatchev create a great tool, write on JavaScript, to highlight our code on blog posting. But how to implement SyntaxHighlighter on every post in our BlogEngine.NET? There is a good Windows Live Writer Plugin by David Pokluda that implement SyntaxHighlighter into BlogEngine.NET using the Extension.
But the extension by Pokluda doesn’t have the ability to change the SyntaxHighlighter Theme, by 30 July 2009, SyntaxHighlighter have 6 built in theme, please check at the web. Therefore i want to extend the extension by Pokluda to have an ability to change the theme.
Basically, to do this we need a setting for the extension, using ExtensionSettings class would be the answer.
// Code by Rudy Setyo Purnomo
// http://rudysetyo.it
ExtensionSettings settings = new ExtensionSettings(“SyntaxHighlighter”);
settings.AddParameter(
"shTheme",
"shTheme",
50,
true,
true,
ParameterType.RadioGroup);
settings.AddValue(
"shTheme",
new string[]
{
"shThemeDefault",
"shThemeDjango",
"shThemeEmacs",
"shThemeFadeToGrey",
"shThemeMidnight",
"shThemeRDark"
},
"shThemeDefault");
settings.Help = "SyntaxHighlighter Theme";
ExtensionManager.ImportSettings(settings);
If you see the original code by Pokluda, you’ll see that the AddStylesheetToPage method only have one parameter, i add one more parameter to set the Theme.
// Code by Rudy Setyo Purnomo
// http://rudysetyo.it
private void AddStylesheetToPage(Page page, string theme)
{
HtmlLink css = new HtmlLink();
css.Attributes["type"] = "text/css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["href"] = GetAbsoluteFromRelativeUrl("SyntaxHighlighter/Styles/shCore.css");
page.Header.Controls.Add(css);
css = new HtmlLink();
css.Attributes["type"] = "text/css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["href"] = GetAbsoluteFromRelativeUrl("SyntaxHighlighter/Styles/" + theme + ".css");
page.Header.Controls.Add(css);
}
// and use this code to receive Theme name from setting parameter.
string theme = _settings.GetSingleValue("shTheme");
These screenshot is the setting screen to change the theme
And the is the 6 theme:
shThemeDefault
shThemeDjango
shThemeEmacs
shThemeFadeToGrey
shThemeMidnight
shThemeRDark
You could find the full code here, put the SyntaxHighlighter.cs at App_Code/Extensions folder.