New and (Much) Improved SyntaxHighlighter Plugin for Mango
ColdFusion , Mango Blog , CFML Add commentsA little while ago, I released a SyntaxHighlighter Plugin for Mango Blog. Although I was fairly happy with my first Mango plugin, I still thought there was room for improvement. Certain things about it bugged me, so I finally dug in and did a complete rewrite. So I am very pleased to release version 2.0 of the plugin! Here is a list of the improvements introduced in this version:
- It uses the latest version (2.1.364) of Alex Gorbatchev's SyntaxHighlighter script. The previous version of the plugin used the deprecated version 1.5.1.
- I eliminated the dependency on the syntaxhl TinyMCE plugin (which added a syntaxhiglighter button to the WYSIWYG editor) to do the syntax highlighting. I found that using syntaxhl was kind of clunky and now you can simply insert code by pasting it directly into the editor between a pair of [code][/code] tags (without disabling TinyMCE or going into "source view"). Therefore, this new version won't add a syntaxhighlighter button to the editor. Please read the README file (included in the download) for more details on how to use the plugin.
- Along with the latest version of the SyntaxHighlighter script comes configurable themes to change the look of the syntax highlighting as well as several new syntax "brushes" (including Groovy, Scala, Erlang, and a few others).
- "Legacy Mode" can be enabled for those who used the previous version of my plugin (or just SyntaxHighlighter 1.5.1 directly) and have a lot of existing posts. This setting will make the plugin backward-compatible.
- The plugin itself was refactored to take advantage of the enhancements to Mango's plugin architecture that were introduced with version 1.3 of Mango.
I hope people find this useful. There are more details in the README file included with the plugin, so make sure to read that so you can take advantage of the new features. People upgrading from version 1 of my plugin should especially read it.
Please note: this plugin was made so that authors wouldn't have to switch back and forth between WYSIWYG mode and HTML mode to add code blocks in their posts. This plugin will ONLY work properly if the code blocks are entered in WYSIWIG mode (you should see a tool bar at the top of the content editor). If the top of your content editor looks like this:
Click on the little pencil-and-paper icon to get back into WYSIWIG mode for it to look like this:
And you should be good to go!
Get the SyntaxHighLighter Plugin
- Plugin version:
- 2.0.1
- Last Updated:
- 2010-01-02
- Requires:
- Mango Blog 1.3+
- Auto-install URL:
- http://mangoblog-extensions.googlecode.com/files/syntaxhighlighter_mango_plugin.zip
Nov 2, 2009 at 10:02 PM Dude, you suck. Two days after I hack my blog to do the same thing! :P
Nice work, will revert my blog to include this plugin!
Nov 2, 2009 at 11:50 PM Do you use the alternative technique highlighted here (http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage) to avoid the escape characters issues? I prefer " <script type="syntaxhighlighter" class="brush: js"><![CDATA[" over "pre".
Nov 3, 2009 at 5:46 AM I just installed, but I don't get the icon to use it like I did in 1.5. I am testing mango in CF 9 on my localhost. Would love to get this working, it rocks`-`
is there a setting that I did not configure?
Thanks,
Johnny
Nov 3, 2009 at 6:50 AM @Johnny,
please read the README file. it's also mentioned in the post that this new version doesn't use the syntaxhl TinyMCE plugin (which gives you the icon in the editor) anymore. You simply paste code directly into your post between [code] tags. For example:
[code:cf]
<cfset foo = "this plugin rocks!" />
[/code]
Also, you should enable legacy mode so your previous posts show up correctly (again, read the readme file).
@Sami,
No, this plugin doesn't use the CDATA technique. It seems to me that feature was developed to get around the issue of having to use HTML entities for the angle brackets. But since I wanted this plugin to work by directly pasting code into the editor and TinyMCE already converts your angle brackets to their html equivalents, it wasn't an issue. Plus, I think prefer this way because it degrades much more nicely if (for some reason) the user has JavaScript disabled. If you use the [CDATA] technique and JavaScript is disabled, the code just doesn't appear. I may add the option to use the alternate technique in a future version of the plugin if there are enough requests, though.
Nov 4, 2009 at 10:50 PM yikes, I know there was something I forgot, so sorry, this plugin rocks!! Great job it is just beautiful`-`
Nov 5, 2009 at 7:10 AM Thanks, John. Glad you like it!
Dec 2, 2009 at 1:32 PM Interestingly, I'm having no difficulty installing this plugin, but I can't seem to get it to work with my code snippets. It handles the following literally:
[code:cf]
<cfset foo = "this plugin rocks!" />
[/code]
Outputting that to the screen precisely as it appears in your post. I'm certain it's a factor of the rich text editor on the post screen, but your docs seem to indicate that shouldn't matter.
Any ideas?
Dec 2, 2009 at 1:35 PM Ha! Disregard... It's working. Unfortunately, the code snippets aren't visibile when I edit my entries and the disappear when I hit save again to update them, but I'll take it! :)
Dec 2, 2009 at 6:23 PM hi Mike,
Really? That shouldn't be happening. My code snippets are still there when I edit my post (and don't disappear when I hit save). That's really weird. I'll look into it, but I can't seem to reproduce the behavior that you're getting so it will be tricky.
Dec 22, 2009 at 7:33 AM For better performance, could you minimize the css and js files? Also combine all the js into a single file and do the same for the css.
Dec 22, 2009 at 8:44 PM @Mike,
Thanks for the suggestions. That's a good idea about minimizing the css and js files. I'll try to get to that soon. But if anyone's in a rush, nothing's stopping them from downloading the plugin, minifying the scripts and installing the plugin manually.
I probably won't be combining the scripts, though. To address performance, I wrote the plugin so the user can select which syntax brush scripts to include (in the plugin's settings page). So, for example, if you know you'll never put C++ code in your blog posts, why include that brush at all in your pages? (for my blog, I have CF, AS3, HTML, JS, SQL and CSS selected, so I'm using only 6 of the possible 23 brushes included in the plugin). For this I of course have to keep all the syntax brush scripts separate so they can be included as needed.
Dec 22, 2009 at 10:04 PM Tony,
On the same token, combining all of them into one minified file download will speed up page load by minimizing the number of http requests. I would suggest a compromise. Since this is a plugin for MangoBlog, you know people will be most like including those files you mentioned above. Combine those as one, and allow the rest as options.
Dec 23, 2009 at 6:58 AM @Sami
I see your point. Combining those 6 brush scripts into a "CF Bundle" and letting that be an option isn't a bad idea. I'll get on it.
Jan 4, 2010 at 7:41 PM @Mike Chandler -- a user pointed out to me that code in post excerpts wasn't being highlighted, which turned out to be an issue with the plugin which I fixed. I'm not sure if this will fix the issues you were having, but I'd suggest upgrading the plugin by using the same install URL found in this post.
Jan 5, 2010 at 12:42 PM I'm having an odd issue with this myself. Should you leave on HTML mode in TInyMCE? It seems to work sometimes, but then when I come back to edit, the code is gone. The [code:cf] block is there, but not the code I typed in.
Jan 5, 2010 at 8:13 PM Hi Ray,
Are you using it in HTML mode? The plugin is meant to be used in WYSIWYG mode. What you're describing happens to me if I try to use it in HTML mode.
Please let me know if it works for you if you try it in WYSIWYG mode.
Jan 5, 2010 at 8:29 PM So to be clear -I do not switch it to HTML mode. I enter the tags as you describe, and I should see my code in the editor, and on the blog entry in the public view - right?
Jan 5, 2010 at 8:32 PM Just tried it in WYSIWYG mode. Used:
moo
[code:cf]
<cfset x = 1>
[/code:cf]
more code
And when posted, the code tags showed up and my CFML wasn't colored. Also, when I go back to the editor and edit, the code:cf tags were there, but not my CFML.
Jan 5, 2010 at 8:53 PM Man, that is so weird! But there must be something to this, since both you and Mike reported similar things. Just to get the obvious stuff out of the way, you did activate the plugin when you installed it, right?
Jan 5, 2010 at 8:56 PM Okay, I noticed in your last comment that your closing code tag had :cf. That should only go in the opening tag. So it should be
[code:cf]
<cfset x=1 >
[/code]
Jan 5, 2010 at 8:58 PM Ok, now it renders right in the front end. In the editor, I only see the tags. I don't see my code.
Jan 5, 2010 at 9:20 PM Well, we're closer, but I'm still puzzled as to why your code is disappearing. In RTE mode, TinyMCE should be converting the angle brackets in your code into html entities and you should be able to see your code fine when you go back to edit it (and see the < and > when you switch off RTE mode). Try this in the following file: admin/editorSettings.cfm, line 19. Change
entity_encoding : "raw"
to
entity_encoding : "named"
Then refresh/reload the blog (go to "cache" in the admin menu and hit "Reload Configuration"). Then try again to put in a code block and see what happens.
This change shouldn't be necessary because according to the TinyMCE docs, leaving the setting to "raw" should still make it so the angle brackets are converted to entities:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/entity_encoding
Something weird is definitely happening, though. I'll look into it more tomorrow and post here if I find anything.
Jan 6, 2010 at 5:02 PM No go.
Jan 6, 2010 at 5:11 PM I have code that disappears as well, so I never use the html version, and disable JS still... Tony if you can fix this, it would remove a big barrier for me. I've avoided posting code because of this issue.
Jan 6, 2010 at 7:13 PM @Sami, I'm not sure what you mean by "I never use the html version". For the plugin, you're not supposed to go into html mode.
I'm really at a loss, guys. It's very hard to debug this when I can't reproduce the issue on my end no matter how hard I try. I've tried installing and removing other plugins which may interfere, I've tried enabling script protection, I've tried messing with the TinyMCE settings and it still works for me as it should on both my development environment (Mac OSX with Apache/JRun/CF8 and Resin/Railo) and in production (CentOS Linux Resin/Railo). I see both the highlighted code on the front end and I'm able to see/edit the code in the backend with no problem. So you guys are either doing something wrong (highly unlikely) or there's some funky configuration difference somewhere.
Do this for me: go ahead and type this in the editor:
[code:cf]
<cfset foo=bar />
[/code]
and save it. Go to your database (I'm using MySQL BTW) and see how the entry was saved. In the "entry" table in the "content" field. What I see is:
<p>[code:cf]<br /><cfset foo=bar /><br />[/code]</p>
Maybe it's some kind of db issue.
Jan 8, 2010 at 4:03 AM Just installed the plugin on my blog and it works a treat. Love it :-) Good work Tony!
Jan 16, 2010 at 1:44 AM Hi Tony,
[code:cf]
<cfset test = "Akash Bavlecha"/>
[/code]
This is what we do in our code for highlighting code.
Suppose, If i have a code and it contains some html code and some coldfusion code or may be a javascript.
Is there any way in this plugin that can differenciate these codes?
I mean to say if we can use it like
[code:cf,js,html](e.g: Provide comma seperated brushes)
<cfset test = "Akash Bavlecha"/>
[/code]
Please let me know if there is some thing like that.
Thanks,
Akash Bavlecha.
Jan 16, 2010 at 9:05 AM hi Akash,
I think it may take some effort to get multiple brushes to work like that, and this is due to limitations in the SyntaxHighligher javascript code. Look at this:
http://alexgorbatchev.com/forums/comments.php?DiscussionID=125
I'm not really aware of any code highlighters which have that capability.
Jan 21, 2010 at 7:35 AM The brushes and the JS are loaded on the before HTML head end. I wonder if it would still work if the JS was loaded on the beforeHtmlBodyEnd, making the JS load on the bottom of the page.
Cheers
Jan 22, 2010 at 1:32 PM @Marcos,
Actually, that's how my version 1 of the plugin worked. It loaded the JS at beforeHTMLBodyEnd. So I think it would still work. I'd be puzzled if that somehow addressed the issue that Sami and Ray were having of the disappearing code in the editor. Are you having trouble with the plugin too?
Jan 27, 2010 at 7:57 PM Hi
Im looking to get MXML syntax highlighting for this but i cant seem to find one. DO you know where there is one about?
Jan 28, 2010 at 5:52 AM @jbuda,
yeah, I couldn't find an MXML brush either. I'm sure one will come out soon, though. In the meantime, I'd just use the XML brush.
Jan 28, 2010 at 6:20 AM I found this one
http://shigeru-nakagaki.com/index.cfm/2007/12/19/20071219-SyntaxHighlighter-for-MXML-and-AS3
But could not get it to work as it kept coming up with an error when i added the JS file to my blog. Kept saying unable to locate brush?
Jan 28, 2010 at 8:09 AM @jbuda,
Have you tried using it? I wasn't sure if this one will work because it was written for the older version of Syntaxhighligher (1.5). With version 2.0 (which this plugin uses) a lot of things have changed and I'm not sure you can use 1.5 brushes with 2.0. Let me know if you got it to work.
Jan 28, 2010 at 8:15 AM I re-read your comment and realized that you have tried using it. I'd say you're getting the error for the reason I pointed out -- it's not compatible with the latest SyntaxHighlighter javascript code.
Jan 28, 2010 at 9:06 AM Ah right... i wasnt sure which version is used. But i guess it may be possible to re-work that one to work with version 2.0?
Maybe something i try in near future.
Jan 28, 2010 at 9:38 AM I'll see if I can update the brush. Probably the best thing to do is to add MXML highlighting to the existing AS3 brush and have a combined MXML/AS3 brush. I'll let you know.
Jan 28, 2010 at 10:30 AM I think i will try and give it a go too and see what i can come up with. But my RegExp is very dodgy!
Feb 26, 2010 at 3:41 PM I, too, am having an issue where the code disappears in the WYSIWIG editor. Has anyone resolved it? I beleive it is an issue with the Blog/TinyMCE itself though, it did it before I installed the plugin.
The plugin is beautiful, by the way.
The whole purpose of my blog is to save code snippets though, so I'll have to definitely resolve this before it sees much use.
Feb 26, 2010 at 4:11 PM @Michael,
I'm really sorry, but I haven't had much time lately to work on the bug. And even if I did, I'm not really sure how I should troubleshoot it since (try as I might), I can't reproduce the issue on my end. It's really weird, since it seems that for some people the plugin works fine and for others, it doesn't.
In comment #25 above, there's a test to see how the code snippets are saved in the db. Could you run that and let me know? Thanks.
Feb 26, 2010 at 4:37 PM This is what is stored in the actual DB
<p>This is a test</p>
<p>[code:cf]<cfset foo=bar>[/code]</p>
This is what you see when you "view source" in the TinyMCE:
<p>This is a test</p>
<p>[code:cf][/code]</p>
...but the page displays properly on the blog when you view the front end.
I am running CF9 on a MS SQL2008 db.
I wonder if it has something to do with the HTMLEditFormat in the Mango Code or if there is something in the TinyMCE that renders it unmunged, or if it is a combination of the two, one unmunging the other.
I suppose I should check my version numbers and post them...
Feb 26, 2010 at 6:13 PM Is your Paragraph Formatter plugin enabled?
Feb 26, 2010 at 6:21 PM Yes. Version v0.5 is activated.
Feb 26, 2010 at 6:44 PM Hmm. When I view the actual, actual page source in the Mango Admin, when viewing the edit screen with the post loaded, I can see it in the actual, actual textarea source. I *can't* see it in the TinyMCE source when viewing the control in the browser at the same time. Seems to be how TinyMCE is choosing to render it.