Nurasto.com Website

My digital scrapbook

SyntaxHighlighter in BlogEngine.Net

on under Uncategorized • Be the first to comment

My biggest concern on my last blog is how to deliver code in BlogEngine.Net. The CodeFormater extension not working like I want and make me little bit frustrated when using the extension. I am looking around to find any cool replacer of CodeFormater then I found SyntaxHighlighter using JavaScript as the engine. Cool right? and you may use it in any application you want regardless the server side language but it will cost in matter of bandwith.

When I want to implement it into my theme, I am looking around for solution before I starting to code and I found tutorials about how to Adding SyntaxHighlighter to BlogEngine.NET. I decide to follow the instruction and some of step are missing. First, you must add the CSS into your theme. The simplest one is by edit your current site.master template and copying the style into the theme, for example:

<link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css" />

You must add this in head section of HTML document. You may asked why you need to copy into your theme directory? because any CSS reference in <head runat="server"> would be replace by BlogEngine.Net into like this

<link rel="stylesheet" type="text/css" href="/themes/yourtheme/css.axd?name=/css/SyntaxHighlighter.css" />

Now, I need some tuning in our tinyMCE.ascx located on Admin folder. I decide to use the uncompressed TinyMCE to make life easier to this

<script type="text/javascript" src="<%=Utils.RelativeWebRoot%>admin/tiny_mce/tiny_mce_src.js"></script>

Yeah, I know it will cost bandwith but I need the function work right. I would look at the compressed version if I have time. Good Luck.