Pre-Code is extremely easy to install, so I won’t even try and give instructions on this. You can find installation instructions for the SyntaxHighlighter on their wiki site, but these instructions need to be adjusted a little bit to get optimal results with BlogEngine.Net.
I’m not saying that the way I set it up is the best way, it’s simply my way for now.
Step 1 – The Scripts
Copy the SyntaxHighlighter /scripts/ folder into your BlogEngine.Net Web folder. You can also put the .js files wherever you want, but I stuck with /scripts/ in my own solution.
Step 2 – The Styles
Since BlogEngine.Net has a built in handler for .css files based on it’s own Theme architecture, I figured it would be easiest to just put the SyntaxHighlighter /styles/ files into my working Theme.
Step 3 – BlogEngine.Core BlogBasePage.cs
Step 4 – Your Master Page
Finally, at the bottom of your master page, before the closing body tag, put the following script block:
Step 5 – Test!
A simple test can be performed to ensure that the SyntaxHighlighter is working accordingly. Just add a sample like the following to a new post and see if it displays like the code snippets in this post.
<pre class="brush: js"> alert("Does this really work?"); </pre>
Since I just completed all of these steps for this blog, I’m hoping to get more code samples from my various projects posted.