Looking for ways to add syntax highlighting to my blog I came accross Scott Dougherty's article for Adding SyntaxHighlighter to BlogEngine.NET and then Chris Blankenship's SyntaxHighlighter Extension for BlogEngine.NET.
I really like his extension, but I wanted the installation path and loaded language scripts to be configurable so I've updated his extension to use the BlogEngine Extension Manager.
- Download SyntaxHighlighter
- Extract and upload the SyntaxHighlighter code to your blog (I renamed the dp.SyntaxHighlighter directory to just SyntaxHighlighter)
eg. ~/extensions/SyntaxHighlighter
- Download, extract and upload the SyntaxHighlighter.cs file into the ~/App_Code/Extensions directory
NOTE:
If you already had the SyntaxHighlighter Extension from Chris Blankenship installed, you might have to delete the "~/App_Data/datastore/extensions/SyntaxHighlighter.xml" file before the new extension settings will be loaded.
- Login to your blog and go to "Extensions" under the "Control panel"
- Click on "Edit" next to the "SyntaxHighlighter" extension and configure as required (see preview below)
For a list of supported languages see the syntaxhighlighter wiki
For Windows Live Writer support:
- Download and install Windows Live Writer and the SyntaxHighlighter for Windows Live Writer plugin (Requires .Net 3.5 framework)
- Update the blog style (In Live Writer under the "Weblog" menu then "Edit Weblog Settings..." and click on the "Editing" tab)
NOTE:
If you have custom ordered list item styles in your theme, you might have to make a small change to the SyntaxHighlighter CSS. In my case I've got a custom list-style-image so I had to make the following change in the "SyntaxHighlighter\Styles\SyntaxHighlighter.css" file:
in the following bit, I added list-style-image: none;:
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
list-style-image: none;
}
Here's the diff:
Index: /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css
===================================================================
--- /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css
+++ /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css
@@ -17,6 +17,7 @@
margin: 0;
padding: 0;
border: none;
+ list-style-image: none;
}
.dp-highlighter a,