Thursday, March 01, 2001 ..:: Home ::.. Register  Login
   TechTidBits (Blog)  

Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

Apr 8

Written by:
Wednesday, April 08, 2009 10:23 PM  RssIcon

AAAAHHHH Beating a config file into submission!  There's a few things in life more pleasureful, but not many!  If you're using DNN + SyntaxHighlighter2 + code highlighting plugin for FCKEditor, you'll want to read on for vital configuration information/gotchas/fixes.

 All that work for one little freak'n icon in DNN's toolbar!!!!!!! :< :< :< :<  All for this......

SyntaxHighlight icon on the DNN toolbar 

Please afford me the luxury to vent....uuuhhh....hhhhmmmm express my......hhmmmm, give you some perspective.  I feel I've earned the right to vent after figuring this beauty out!  Ya, ya, I'm getting to the solution, just give me a sec. :>

I've been using DNN since the summer and hated showing C# code with screen captures.  I've heard people really hate screen caps and it's more work than it's worth to cut'n'paste, open a graphics tool... Anyways, long story short, I wanted a BETTER way to show code snippets as quickly as possible.  So in early February I came across Gary Woodfine's blog entry which was a ray of hope!  Actually, truth be told, Gary found me, or my forum posting on DNN asking about this functionality. 

So, off to his blog I go!  Download and install SyntaxHighlighter and that was relatively straight forward (thank you Gary).  This sets up your pre tags in your blog entries at "runtime" (when people are viewing your blogs) to display your code in a properly formatted structure (including colour highlighting, ability to print, cut'n'paste, etc).  What's VERY cool is you can now give your readers the option to copy'n'paste your beautiful works of artful and creative brain farts.....uh......thoughts, ya that's the ticket, into their IDE so they can expand on your ideas and take credit for them to their boss.  Ok, ok, so that's taking it a bit far, seriously, most people will likely just look at the code and think "that's cool." :>  But it's the ability for them to cut'n'paste the code that's cool! 

class Program
        static void Main(string[] args)
          List computerFilms = new List();
          //prob with this code formatting tool to work with Generics
          //it should look like a List of Film objects

          Film sneakers = new Film( "Sneakers", 1992 );
          computerFilms.Add( sneakers );

          Film warGames = new Film("WarGames");
          computerFilms.Add( warGames);

          Film hackers = new Film( "Hackers", 1995 );
          computerFilms.Add( hackers );

          Film tron = new Film( "Tron");
          computerFilms.Add( tron );

          foreach( Film film in computerFilms )
            Console.WriteLine( film.ToString() );


Back to my story.  That's how things work at runtime!  Beautiful.  But it's at blog creation time I really wanted to save time!  So I tried to install the code highligher plugin for the FCKEditor.  That turned into a three frustrating night ordeal (over 24hrs of effort).  The third night was tonight, but as they say, third times a charm!  SUCCESS!

Like I said, viewing the code is half the battle.  The other half is getting that little {....} Code icon on the DNN toolbar.  The code highlighter plugin instructions are cool but lacking a bit for DNN.  Here's how to get things back on the rails for your DNN installation (yes, this is where you can WAKE up now and get the solutions/fixes :>).

  • the current version you want now is SyntaxHighlighter 2.0
  • the directory to install into in 'syntaxhighlight' (yup, no caps in the name at all) and as the instructions say, case matters
  • edit the fckconfig.js file in the Custom directory so you are free to take any upgrades without clobbering your current config/setup (very important IMHO!)
  • the lines to add the plugin and set the default language can go pretty much anywhere but logically put them around where there's the other "FCKConfig.Plugins.Add(" statement (helps keep things tidy, I know, I know they're commented out but it'll help you find things in the future)
  • one secret to getting the code highlighter plugin icon on the DNN toolbar is to add it to the "DNNDefault" ToolbarSets and not the "Basic" as specified in the instructions since that toolbar, well doesn't exist when you choose Basic.

  • chances are pretty good you'll want to make the pre tags look different at "design time" as well, so you'll want to find and edit the fck_editorarea.css, curious, they don't help you find that file but they do the rest of them?
  • Now if you do ALL this, you're still hosed for the code highlighter plugin icon!  Why's that?  Cause the installation files have one small oversight/bug, it accidentally references the path with a '2' in it (I can only assume the original developer was testing mutliple versions at the sametime?)

Line to change in FCKEditor.config

  • Anyways, until the install files are fixed, you are going to have to update the fckplugin.js file and update the items array index name
  • NOW!!!!!  you're done for the installation and configuration, yup, one more step....hey, don't shoot the messanger, I'm trying to help out here!  But it's actually one easy step, you need to force your browser to clear it's cached files so the new CSS files can be reloaded.  THEN you'll see the icon in your DNN FCKEditor setup.

To help out, here's a summary picture of the directories and locations of files you're going to need to "play with."

Directory and config file location and information

OK, so now I hope you're able to see the little {....} Code icon on your toolbar so you can easily add code to your blog entries in DNN.  Now that you're all setup, now's a great time to go grab a coffee and get coding! :>


PS  There is one more caveat I've found VERY frustrating.  It's not directly related to any of the plugins, just something to be careful of.  Be VERY careful with putting in pre tags or anything with "less than" or "greater than" characters.  Why?  Cause DNN will save them to the DB in one format, and people will be able to view your blogs ok ,but as soon as you goto edit that blog entry, DNN will show you the translated "less than" + tagname + "greater than" characters and once you save THAT version, you're in for a rude awakening when you go back to view your blog.  Not pretty.  Easiest just to avoid using the "less than" and "great than" chars in your blogs.



Syntax Highlighter2

Code highlighting plugin for FCKEditor

Three Nine Consulting: How To: Sntax Highlighting in Code Samples, Gary Woodfine

Got Net?: Code Syntax Hilight Plugin for FCKeditor, Darren James

Location: Blogs Parent Separator TechTidBits

6 comment(s) so far...

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

Excellent! Glad you got it working ,you get 10/10 for perserverance :-)
Enjoy it , hope to be seeing some useful code snippets that I can hand to my boss to take credit for :-)

By Gary Woodfine on   Thursday, April 09, 2009 8:55 AM

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

HAHA! :> Thank you! I did goto bed last night feeling very content about getting it to work and MANY thanks to your original email and blog, for without I wouldn't have even started down that road. Much appreciated.

re useful code for your boss
:> LOL I hope to have something soon! :> Well, hopefull more than one! :> Have a good weekend! :>

By phenry on   Thursday, April 09, 2009 8:55 AM

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

Henry, you are using the wrong path, it should be

The directory in the download is named like this, and the documentation in the download also references syntaxhighlight2. There are two versions of the plugin, one for the older syntaxhighlight library, and one for the most current. Some other blog posts explaining how to use the plugin reference the older version, which further confuses things.

The image in my original article was for the older version, its now been updated, along with some other clarifications about the different folder names. Sorry for any confusion!

By Darren on   Friday, April 10, 2009 12:17 PM

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

Thank you Darren for the updates! I did see you updated the pics on your site, cool! Have a good one! Sorry for being so short, trying to prepare for a presentation this week! More soon, thanks again for the update and posting! Much appreciated!

By phenry on   Monday, April 27, 2009 8:21 PM

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

I might have found a little glitch in the latest DNN update 5.1.2. I just updated my site on 9/3/2009,, to this latest upgrade, and while the upgrade worked without any errors or issues, it did seem to revert all my Syntax Highlighting settings back to the default settings. And I have not been able to get the FCK icon to appear in order to add new code snippets to my blog.

The existing code snippets are rendered nicely with the Syntax Highlighting, I just can't get it to work with this new update.

If you have upgrade to 5.1.2 and get it to work, can you post your instructions? I too have a blog post to help DNN users on installing this plugin and it worked in the previous version, but not this one. But then again, I could also be missing something.

By King Wilder on   Sunday, September 06, 2009 10:29 AM

Re: Are you having trouble highlighting code in DNN using the FCKEditor and SyntaxHighlighter?

Hey Cathy, Janny, Marla, Jaxen and Admin, I don't know why you insist on adding comments, they NEVER get published! In fact I get a kick out deleting them! haha

For those of you wondering, uuuhh what coffee are you sipping Peter? I'm getting spammed by one person\company trying to sell something via my blog and I don't like it! I write stuff to help me and you, technical\coding content, and as much as I can help it, REAL MEAT! I have little time or patience for marketing crap and I LOVE deleting those bogus comments! When it gets to be too much, I just turn off all comments, lets just hope it doesn't get to that point.

By Peter Henry on   Tuesday, March 18, 2014 8:41 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Add Comment   Cancel 
Copyright 1999-2012 by   Terms Of Use  Privacy Statement