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)

Share/Save/Bookmark
Signature

Comments

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

Justin Wendlandt

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.

Justin Wendlandt | Reply

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

Klaus Graefensteiner

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

Klaus Graefensteiner | Reply

11/20/2009 6:37:06 PM #

VB6 Read Text File

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.

VB6 Read Text File | Reply

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

Santosh

Perfect, just what I was looking for!

Santosh | Reply

11/29/2009 3:29:45 PM #

trackback

Extensions

Extensions

BlogEngine.NET | Reply

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

Pankaj

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

Thanks

Pankaj | Reply

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

Mithun

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 | Reply

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

Mithun

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

Mithun | Reply

1/4/2010 1:45:08 PM #

rtur.net

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

rtur.net | Reply

1/4/2010 2:56:26 PM #

trackback

Syntax Highlighter Rendering Problem

Syntax Highlighter Rendering Problem

Mithun Bose | Reply

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

Tila

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

Tila | Reply

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

Al Bsharah

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 | Reply

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

Al Bsharah

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 | Reply

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

Al Bsharah

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 | Reply

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

Al Bsharah

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!

Al Bsharah | Reply

3/7/2010 11:34:30 AM #

rtur.net

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?

rtur.net | Reply

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

Al Bsharah

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?

Al Bsharah | Reply

3/7/2010 1:54:30 PM #

rtur.net

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.

rtur.net | Reply

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

Al Bsharah

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.

Al Bsharah | Reply

3/9/2010 7:32:00 PM #

rtur.net

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 Smile

rtur.net | Reply

Add comment

Enter your name, handle, alias, or email.

We'll incarnate your avatar from the services below.

(Will show your Gravatar icon)

  Country flag

biuquoteimgred
  • Comment
  • Preview
Loading



<<  March 2010  >>
SuMoTuWeThFrSa
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Enhanced with Snapshots

Subscribe to Rtur.net