Note: This version of the SyntaxHighlighter plugin has been deprecated. I've left this post up for purely historical documentation. The new version works in a COMPLETELY different manner so disregard the instructions in this post. For info on the latest version and the download, go to this post.
I've been using SyntaxHighlighter code formatter (written in JavaScript) for my blog posts. They way I integrated it into my blog was by basically hacking my Mango installation. I hard-coded the script calls in my Mango skin and I also added the syntaxhl TinyMCE plugin to my blog post editor in the admin (manually changing the TinyMCE configuration in the process). I recently upgraded my Mango installation to the latest version (1.3.1) which, of course, wiped out a lot of the hacks for the SyntaxHighlighter functionality (which, of course is the main downside to this way of doing things). I've been meaning to get more into Mango plugin development, so I saw this as an opportunity to write my first Mango plugin. So I present to you the SyntaxHighlighter Mango Plugin.
Installation instructions are included in the download. Basically, all you need to do is unzip the download and copy the SynthaxHighlighter directory into your /components/plugins/user/ directory and then activate the plugin from the admin. You can then go to the your blog settings page ("Settings" in the lefthand menu in the admin) and you should see a "SyntaxHighlighter" link up top. If you click on that, you'll be able to select the SyntaxHightlighter code "brushes" that you'll have access to when entering your code snippets.
The plugin will add a SyntaxHighligher button to your TinyMCE editor (which looks like a highlighter pen). Note: the latest version doesn't work this way anymore and you won't see a syntaxhighlighter button. More info here.
Clicking on that button when adding/editing a post opens a dialog window where you can paste or type in your code. There you also select which language to format for (options are determined by what was selected in the SyntaxHighlighter settings page), as well as a few more options.
Hope some people find this useful. This plugin modifies the TinyMCE configuration in the blog admin. Since the LightBox2 plugin by Adam Tuttle and Mark Aplet also modifies these settings, I basically copied their method of doing that. Thanks guys! Also, be aware that upgrading your Mango version may overwrite the plugin's modifications. So if you lose the SyntaxHighlighter button after a Mango upgrade, you should deactivate and reactivate the plugin.
Upadate on 6 August 2009, 11:00 pm EST: I updated the plugin so that default syntax brushes are enabled upon plugin activation (before, nothing was enabled until you visited the settings page). I suggest you download the new version if you previously downloaded the old one.
Plugin updated to version 1.0.2 (added ActionScript 3 syntax brush) on 10 August 2009, 7:55 pm EST
Plugin updated to version 1.0.3 (fixed install path bug) on 7 October 2009
Plugin updated to version 2.0 (major update) 2 November 2009. This version works in a significantly different manner (i.e. there is no longer a syntaxhighlighter button installed in the editor) but has a legacy mode to provide backward compatibility with the version 1.0 plugin. For more info, read this post.
Aug 6, 2009 at 9:58 AM Ah, this is VERY cool beans, there has been a code highlighting plugin for a while but it required you to disabled the rich text editor in order to use it, this is a much better solution!
I'll be trying this out later this evening, we're yet to launch the company blog whilst we get things like this working.
Cheers,
Rob
Aug 6, 2009 at 10:01 AM Hope this works out for you, Rob. If you (or anyone) have any suggestions for improvement or want to contribute code, feel free to contact me.
Aug 6, 2009 at 10:06 AM Sure thing Tony,
The only thing that interests me now is the extendibility of the languages, for instance, how easy would it be for me to add support for Python / JAVA code to that?
Rob
Aug 6, 2009 at 10:10 AM Rob,
Java and Python code brushes are included. Once you activate the plugin, go to the settings page (as described in the blog post) and just select those languages from the list and they'll appear in the dropdown.
I did it this way instead of autmatically including all of the brushes, since each brush needs a separate javascript file to be included. By only selecting the brushes you're likely to use you're not loading any unnecessary js files.
Aug 6, 2009 at 10:13 AM ah SWEET! that sounds excellent Tony, I'll let you know how I get on. Oh and hey Tony, if you twitter feel free to come find me. http://www.twitter.com/SirRawlins
Aug 6, 2009 at 10:36 AM Cool. Turns out I recently opened my Twitter account. You can find me at http://www.twitter.com/objectivebias
Aug 6, 2009 at 8:05 PM When I try to activate the plugin I get a "Plugin could not be activated" Am I doing something wrong?
I unzipped uploaded to my blog: /components/plugins/user/
In my version to active the plugin is in Add On, and not Settings.
When I try to active it, on the bottom under Not Active plugins, I get the error ""Plugin could not be activated"
I also tried to de active other color coding plugins as well.
I would love to get this working!
Aug 6, 2009 at 8:15 PM @john,
When you unzip the download there is a folder inside the top folder named "SyntaxHighlighter" make sure THAT's the folder you put in your /components/plugins/user/ directory. Don't put the top level folder in there.
Yes, I know that to activate the plugin you go to "Add Ons". But to configure the plugin with the syntax "brushes" you want to use, you go to "Settings" and then click on "SyntaxHighlighter" at the top.
Aug 7, 2009 at 7:13 PM Tony that is just awesome! Here's me, literally two nights ago looking at your blog source, looking at SyntaxHighlighter on Google Code, cutting and pasting and trying to figure out how you got that magic to happen.
If I had only waited one more day...
Thanks for this!
Aug 7, 2009 at 9:40 PM you're welcome, Grant!
Aug 7, 2009 at 11:59 PM Hi Tony,
I got it working`-`
I am so stoked, this is such great work I can't believe it is really true, I can finally use code in mango, as I have some issues lately! This is the best thing to ever happen to mango!
I see what you were talking about in the Settings panel, I was able to change the javaScript to java`-`
I am using Java for Actionscript 3, but I am wondering how I can add the As3.js file to this project, without messing up what is working perfectly?
I asked this on the mango blog forms too, and I am wondering if I add the as3 to the form tag, would this show up on the settings section so I can add AS 3 to the syntax Highligher?
Thanks again this is so wonderful`-`
Johnny`-`
Aug 10, 2009 at 8:24 PM Hi Johnny,
Sorry for the delayed response. I was away on a short vacation. I updated the plugin to include an AS3 syntax brush. Just download the plugin again and give it a go.
Aug 11, 2009 at 10:05 PM Hi Tony,
Thanks so much fro including the AS 3 brush!
It is wonderful`-`
Thanks so much for making the plugin, now I can always post code with no worries`-`
Thanks again,
Johnny`-`
Aug 12, 2009 at 7:31 AM You're welcome, Johnny. Glad you like it.
Aug 13, 2009 at 7:12 AM Hi Tony, this is indeed a great plugin. I've been using SyntaxHighlight for while, but have always been to lazy to create a plugin for it.
Only draw back I can see for you plugin is that it doesn't keep format (i.e. indentation and spaces).
Could you please fix this?
Cheers
Aug 13, 2009 at 7:22 AM hi Marcos,
If you look through my blog posts, such as this one:
http://www.objectivebias.com/blog/entry/accessible-display-of-content-images-in-sava-cms
You'll see that my code blocks do contain indentation and spacing. I'm not sure why it's not working for you. Try cutting and pasting your code in.
Aug 13, 2009 at 7:39 AM That's very weird. I'm copying straight from my cfeclipse, but it simply removes all my spacing once I save it.
I'm also running version 1.3 of mangoblog.
Oct 7, 2009 at 2:21 PM When I activate the plugin I get an error 'Plugin could not be activated'. I tried it a few time without success. I'm running Mangoblog 1.4. Any Ideas?
Oct 7, 2009 at 7:44 PM @Daniel,
I think it may have been caused by an install path bug that snuck in the last time I updated the plugin. Try it again. If you're installing it manually, make sure you unzip the download first and only upload the enclosed "SyntaxHighligher" directory into your plugins directory. The easiest way, though, is to just paste in the following url into the auto-installer field at the top of the Plugins page in the admin:
http://www.objectivebias.com/blog/assets/content/files/SyntaxHighlighter_Mango_plugin.zip
I just tested it in Mango version 1.4.1 and it worked. So let me know how it goes for you
Oct 8, 2009 at 1:35 PM Thanks Tony. I installed it with the URL but still got the same error message... than I found the problem: My Blog is still running under CF7! I forgot ;-(
On line 125 you have var local = {} in Handler.cfc
I changed it to old array initiation arrayNew(1) and it worked
Oct 8, 2009 at 7:05 PM Ah! That explains it! I guess I should change it for compatibility with CF7. Thanks for spotting that.
Oct 30, 2009 at 4:41 PM I manually added version 2.0 of the syntaxhighligher. I'd love to use the plugin when you support 2.0!
Oct 30, 2009 at 9:11 PM I'll get to work on it!
Nov 2, 2009 at 6:20 PM Hey Sami (and everyone else). As promised, I just released version 2 of my plugin which uses the latest SyntaxHighlighter version 2.1 (as well as other improvements). Get it here:
http://objectivebias.com/blog/entry/new-and-much-improved-syntaxhighlighter-plugin-for-mango
Dec 20, 2009 at 10:07 AM Hi, Tony~~~
After I activate the plugin, I can't found "SyntaxHighligher button" on my TinyMCE editor. I manually added version 2.0. My Mango version is 1.3+.
Please help me~~~
Dec 20, 2009 at 1:02 PM @nooree
Version 2.0 of the plugin doesn't use the button anymore. Please read the post which talks about the new plugin version as well as the documentation that comes with the plugin (the readme.txt file)
http://objectivebias.com/blog/entry/new-and-much-improved-syntaxhighlighter-plugin-for-mango
Jan 1, 2010 at 4:48 AM Hi, Tony
I have activated the plugin, I didn't find 'syntaxHighligher button'.
Please help me. I'm looking for that.
Jan 1, 2010 at 12:16 PM @Akash
What version of the plugin did you install? If you installed the new version (2.0), there is no button anymore. Please read the readme file and this post:
http://objectivebias.com/blog/entry/new-and-much-improved-syntaxhighlighter-plugin-for-mango
Jan 1, 2010 at 7:55 PM Thanks, Tony!
I found all details of new version and luckily i have installed a new version of SH plugin.
Jan 1, 2010 at 7:59 PM Hi Tony,
I have one another question to ask.
When i have a big content in my blog then usually i type it in a 'Excerpt' under an editor of blog to get 'more' link. But if the code typed in 'Excerpt' do have any code and i wrap it with brushes it doesn't appear as it do in my other blogs without any 'Excerpt' section included.
Please advise as i need to have this feature.
Thanks,
Akash Bavlecha.
Jan 2, 2010 at 6:23 AM @Aktesh,
I see what you mean. The plugin doesn't seem to work in excerpts. That was an oversight on my part. I'll fix it and let you know when it's working.
Jan 2, 2010 at 10:00 AM @Aktesh,
Turns out the fix was pretty simple. Try upgrading your plugin by downloading from the same location and let me know if it works for you now.
http://mangoblog-extensions.googlecode.com/files/syntaxhighlighter_mango_plugin.zip
Jan 4, 2010 at 12:16 AM Hi Tony!
It worked for me.Thank you so much for fixing it.
And yes I'm Akash not 'Aktesh'.
Jan 4, 2010 at 2:04 AM whoops, sorry Akash! glad it's working for you now.
Jan 4, 2010 at 2:10 AM Its Okay Tony. We are running our coldfusion blog. It has been started just before 2 weeks.
Have a look at this.
http://coldfusion.isummation.com/
Jan 4, 2010 at 5:03 PM Very nice, Akash. Thanks again for pointing out the issue with the plugin. I thought it was important enough to write a small post about it.
Feb 1, 2012 at 6:48 AM potassium bromide sodium bromide new york city pharmacy http://sundrugstore.net/products/mobic.htm problems in the pharmacy field