Nurasto.com Website

My digital scrapbook

SyntaxHighlighter BlogEngine.NET Extension

on under Uncategorized • 3 Comments

This is my first extension for BlogEngine.NET. It will add HTML javascript syntax code in head section and rendering javascript function after the content place holder to be able to use SyntaxHighlighter. The only weakness of this extension that is I need to tweak the TinyMCE before be able to use this extension. You could see my post about how to setup SyntaxHighlighter in BlogEngine.net.

The features that existed in this extension is add particular syntax js file which tell the extension which js file need to be inserted. So, you may want csharp and xml/html be available on your site but ignoring the rest. The extension also add the core javascript  and CSS file from SyntaxHighlighter directory automatically. BlogEngine Page and Post able to use this extension.

If you’re in hurry. This is patch package, so you could patch your blogengine right away, but if you’re advanced user and any modification had been held to files in admin file, please just extract the extension. The extension doesn’t have any warranty, so be careful, I am not recommended to overwrite your working blog. You could download the file JSSyntaxHighlighter.zip (97.17 kb).

To know how extension work then please

How to Setup

I will tell you how to setup my very first extension:

  1. Download SyntaxHighlighter from Google Code repository
  2. Extract the content on the root of the BlogEngine.net directory
  3. Rename dp.SyntaxHighlighter into SyntaxHighlighter
  4. Copy my code into App_Code/Extensions
  5. Access the admin page and check out the extensions configuration
  6. You may add the js file you want to handle code syntax according your needs, the syntax type input it’s not usable for moment but giving idea with the js file do. The Syntax File will fetch from Scripts subdirectory from SyntaxHighlighter. You could delete the uncompressed subdirectory if you want.
  7. This step is tricky, you need to make some adjustment into TinyMCE to make the code work. Go to admin directory from BlogEngine root, and open tinyMCE.aspx, you need to change from this
    								<script src="/admin/Pages/<%=Utils.RelativeWebRoot%>admin/tiny_mce/tiny_mce.js" type="text/javascript">

    to this

    								<script src="/admin/Pages/<%=Utils.RelativeWebRoot%>admin/tiny_mce/tiny_mce_src.js" type="text/javascript">
  8. Now open the tiny_mce_src.js, and find this codes
    					-pre[class|align|style]

    add an element into it

    					-pre[class|align|style|name]

    Now, find this

    					h = h.replace(/\r/g, ''); // Windows sux, isn't carriage return a thing of the past 🙂

    and comment it or delete it, if you choose to comment it would be

    					/* h = h.replace(/\r/g, ''); // Windows sux, isn't carriage return a thing of the past 🙂 */

and the setup is over … 🙂

Daily Usage

To use the SyntaxHighlighter you could use HTML editor which available on the left corner of the TinyMCE when you creating a new post or page.

<pre class="xml" name="code">
<-- this an example for html code -->
<a href="www.nurasto.com"">My Site>/a>
</pre>

You may see that the SyntaxHighlighter activated by name=”code” and it would load the shBrushXml.js to render the content. You could see the alias/supported language to be use as class name in SyntaxHighlighter site. Note: you need to use HTML Character to convert the < or > into displayable format which the code is &lt; and &gt;

This is patch package, so you could patch your blogengine right away, but if you’re advanced user and any modification had been held to files in admin file, please just extract the extension. The extension doesn’t have any warranty, so be careful, I am not recommended to overwrite your working blog. You could download the file JSSyntaxHighlighter.zip (97.17 kb)

  • Paul

    Hi,

    I’m getting this error:

    Request is not available in this context
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Web.HttpException: Request is not available in this context

    Source Error:

    Line 27: public JSSyntaxHighlighter()
    Line 28: {
    Line 29: this.blogRoot = Utils.AbsoluteWebRoot.ToString();
    Line 30:
    Line 31: //need to mention the namespace cause by ambiguity

    Source File: App_Code\Extensions\JSSyntaxHighlighter.cs Line: 29

    Any idea?

    Thanks.

  • The UtilsUtils.AbsoluteWebRoot.ToString() will call the HTTPRequest object. As long as I know This would happen in IIS 7.

  • Thanks for sharing this information with us. Going to install this extension this evening. Just converted my blog over to blogengine and have had some quarks with it but hey, it tends to happen.