Under categories of BlogEngine.NET | Comments (1)

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 read ....

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)