Syntax Highlighter extension for BlogEngine

15. November 2009 16:33 by rtur.net in Extensions  //  Tags: ,   //   Comments (23)

logo

There are several implementations of this extension for BlogEngine, but I wanted it to work with latest JS library and be more configurable. And also I wanted it play well with TinyMCE - yes, it might come as a shock but some people don't use Windows Live Writer. I don't know why... So, if you go through usual routine downloading and moving files to corresponding location (you’ll need to overwrite couple) this is what you’ll get.

1. Configurable options for syntax highlighting. You can set it way you like by checking your options in the admin/extensions/edit page.

options

brushes2. Ability to select brushes. Latest Syntax Highlighter comes with 22 (!!!) built-in brushes, each represents language supported by this library. Every language comes with it’s own JavaScript file, and you don’t want reference those you don’t use. Here you can make a selection of languages you commonly use in your blog posts to lighten JS downloads and speed things up.

 

themes3. Themes selection. I was not particularly impressed with themes and decided to stick with default one, but if you are using dark colors on your blog, you might find that one of the custom themes serves you better. You can always  easily change it back and force from edit settings menu.

 

codebtn4. To make it a little easier to work with web editor, the “CODE” button added to the TinyMCE toolbar. When in “edit” mode, click anywhere in the text and push button to add standard snippet to the editor, then modify it with your code and, if needed, change “brush” (language) from C# to the one of your choice. This clearly requires some extra work, but for now it will make things easier. The result of insertion should look exactly like this:

function foo()
{
    return 0;
}

I have also included “Settings.ascx.cs” file that fixes small glitch in Extension ManagerBlogEngine 1.5 has label width set to 100px and I have reset it to 250 to match text box size and let longer labels look better.

I really think that we should add this formatter to the next BlogEngine version and faze out current code formatter BE uses. It is much better supported and a lot more robust. Please feel free to download and try it, and you’ll see it for yourself.

Update: there was a bug fix, RSS feed would not work when casting to Page. Download file is updated but if you already downloaded version with this issue, you only need to add one line of code to make it work with RSS feed.

 

private void AddSyntaxHighlighter(object sender, ServingEventArgs e)
{
    // add this line to fix RSS
    if(e.Location == ServingLocation.Feed) return;

    ...

    context.Items[ExtensionName] = 1;
}

 

SyntaxHighlighter.zip (102.76 kb)

Comments (23) -

Justin Wendlandt
Justin Wendlandt
11/16/2009 12:24:06 PM #

I totally agree with you! This is a great library, and I have been using it for quite some time.

If it is built into the core (and configurable) I think it's an excellent idea.

Klaus Graefensteiner
Klaus Graefensteiner
11/19/2009 1:13:05 PM #

Hi Rtur,

This meets exactly my needs. I use for most of my blog post WLW, but I was looking for some SH and TimyMCE integration for the cases where I'd like to blog about some source code snippet while I am sitting on somebody else's computer, which might not even be a Windows PC.
I'll check out your extension and I am especially curious about the changes that you needed to make to the TinyMCE configuration.

Thanks,

Klaus

VB6 Read Text File
VB6 Read Text File
11/20/2009 6:37:06 PM #

Fantastic post on Syntax highlighter. I know how hard is to format the source code to present in the front end. I have tried my own three years back and gave up in the middle. I used Regular expressions while saving the post.
When the formatting happens in this library? saving the post or rendering the post.
the screenshots looks very nice and professional.

Santosh
Santosh
11/26/2009 10:58:15 AM #

Perfect, just what I was looking for!

Pankaj
Pankaj
1/2/2010 1:55:25 AM #

Is there any way i can integrate Syntax Highlighter extension with FreeTextBox?

Thanks

Mithun
Mithun
1/4/2010 8:12:31 AM #

Hi Rtur,

Thanks for this. I've implemented syntax highter in my test blog which is using Blogengine.NET 1.5.0.7; however, I am getting a weird problem - the syntax highlter is adding a new line after every C# keyword it finds. Are you aware of any such issue?

Here is the code that I am using:

<pre class="brush: c-sharp;">namespace ThirdPartyLibrary {
public interface ISMS {
void SendSMS(string smsText);
}
}
</pre>

Syntax Highlighter is displaying it as below:

namespace
ThirdPartyLibrary {
public
interface
ISMS {
void
SendSMS(
string
smsText);
}
}

Its adding a new line after every C# keyword.

If you are aware of this issue then, please could you point me to the solution.

Cheers,
Mithun


Mithun
Mithun
1/4/2010 10:57:18 AM #

Hi Again,

I've figured out the problem. This was only happening when I was using the built in Indigo theme. When I changed the settings and pointed to some other theme, the syntax highlighter was rendering the code correctly.

I am just guessing that some CSS setting in the indigo theme might be causing this side effect.

Anyway, thanks again for this extension.

Cheers,
Mithun

rtur.net
rtur.net
1/4/2010 1:45:08 PM #

It is got to be some CSS style in Indigo that "clears" line breaks.

Tila
Tila
2/13/2010 6:23:15 AM #

This is awesome, however, can this be used with blogengine 1.6.0? Thanks in advance

Al Bsharah
Al Bsharah
3/2/2010 9:38:01 PM #

Hmmm.  Installed this on my 1.6 BE installation, but it's only displaying basic text with no formatting.  I'm seeing the < pre class="brush: c-sharp;" > code in the HTML editor, but the format doesn't change at all.  

I installed the files twice, to be sure I didn't miss something.  Thoughts?

Al Bsharah
Al Bsharah
3/2/2010 9:45:29 PM #

After looking at the page source, it appears that these StyleSheets are loaded:

shCore.css
shThemeDefault.css

...and the appropriate .js files are loaded as well.

Folder's seem right.

Al Bsharah
Al Bsharah
3/2/2010 10:02:50 PM #

Ah...noticed an error on the page:

Message: 'SyntaxHighlighter' is undefined

...on this line:
SyntaxHighlighter.config.clipboardSwf='/User%20controls/syntaxhighlighter_2.1.364/scripts/clipboard.swf';

Al Bsharah
Al Bsharah
3/7/2010 10:37:21 AM #

Hi again.  Any thoughts on this?  Is this a 1.6 compatibility problem, or something I'm missing?  I've run out of ideas...

Thanks for any help!

rtur.net
rtur.net
3/7/2010 11:34:30 AM #

Just downloaded fresh 1.6, installed extension and tried it out - all worked fine. Should be no compatibility issues. When you switch to "source view" in the browser and search for ".js" - do you see all the highlighter scripts added to the header? And if you go to settings page for extension - can you verify that all works fine and you can change values and they persist?

Al Bsharah
Al Bsharah
3/7/2010 12:52:15 PM #

Hey, thanks for the reply.  So:

1)  Yes, I see all the highlighter scripts
2)  Yes, everything persists in settings
3)  I put a sample of it at the very bottom of this post, look below this text:TEST BELOW, PLEASE IGNORE":
http://al.bsharah.com/post/2009/05/12/Integrate-TweetMeme-Button-into-BlogEngineNET.aspx

Thanks for the help...maybe there's a conflict with another extension?

rtur.net
rtur.net
3/7/2010 1:54:30 PM #

I copy-pasted block of code you used and it works as is, your source also looks ok... May be it is a conflict with another javascript library that other extension uses. You might try to turn custom extensions off to see if it will make any difference, better yet download it and run locally so you not constraint by prod environment and can easily recycle IIS etc.

Al Bsharah
Al Bsharah
3/9/2010 1:00:01 PM #

So, here's what I did:

1) Made sure my dev site code and data was identical to my production site, and that it's functioning the same.

2) Disabled ALL extensions (even this one).  Recycled App Pool.

3) Enabled only this extension.  Recycled App Pool.

4) Restarted IIS for kicks.

Still no luck at any step of the way.  The code displayed is identical regardless of whether the extension is enabled or disabled...it's as if it's not even running.  

Thanks for the help with this...not sure what to do at this point.

rtur.net
rtur.net
3/9/2010 7:32:00 PM #

That is really odd... As a last resort, if you send me your site's backup I can run it locally to see what is going on. Just don't forget to remove any sensitive info :)

Hoang
Hoang
3/27/2010 11:15:01 PM #

How to modify code to apply this extension for Comment
<pre class="brush: c-sharp;">namespace ThirdPartyLibrary {
public interface ISMS {
void SendSMS(string smsText);
}
}
</pre>

Olaf Rabbbachin
Olaf Rabbbachin
4/12/2010 11:02:56 AM #

Hi there,

I just noticed that, after I recently upgraded BlogEngine from 1.5.7 to 1.6, the little CODE button in the editor is gone (see 4. above). Any idea how to get it back? It's pretty cumbersome to always have to go and paste code into the HTML editor along with the pre-tag ...

BTW - @Al, it seems I'm always one or two steps behind you. :-)

@RTur - many thanks for providing the add-in!

rtur.net
rtur.net
4/12/2010 2:04:15 PM #

You have to put back admin/tynyMCE.ascx from extension package, it got replaced when you upgraded.

Olaf Rabbbachin
Olaf Rabbbachin
5/1/2010 11:36:19 AM #

Hi rtur,

gee - seems I forgot to subscribe to notifications; sorry for the late reply!

I downloaded the zip again and cross-checked all files. I must've forgotten to copy the editors-folder's content back when upgrading. This fixed it.

Thanks!

master anupolis
master anupolis
5/13/2010 10:37:00 AM #

Great work my friend, i just included to my site and is awesome :)

Pingbacks and trackbacks (8)+

Comments are closed