ExpressionEngine 2 syntax mode for Coda 2

Posted in Web Design on Friday, 6th July 2012 at 2:23PM

ExpressionEngine 2 syntax mode for Coda 2

UPDATE 31st October 2014: With the release of Coda 2.5 the Channel entry tag gained a red background.  You can remove this by importing the Coda EE2.sss file that has been added below.  Drag the file to your Coda icon in the dock and select 'Coda EE2' from the dropdown menu that appears. Close the preference window and your tag should be restored.  I have also updated the syntax mode with some of the newer EE2 tags.

UPDATE 3rd August 2012: The original version of this syntax mode stopped working with the Coda 2.0.2 update.  The latest version should restore functionality.

I've been Googling 'ExpressionEngine syntax mode for Coda 2' almost daily for the last few weeks in the hopes that someone would come up with an EE2 syntax mode for the brilliant new code editor from Panic and put me out of my misery, but so far I've been left wanting.

As an act of desperation I decided to have a go at putting something together myself using existing syntax modes as a base from which to start.  After a bit of trial and error I have come up with something which works well enough to get me through until someone who knows what they're doing releases something better.

So far I have enabled basic syntax highlighting for ExpressionEngine 2 tags / parameters and added auto-completion for  most standard ExpressionEngine tags, variables and parameters along with some Structure tags for good measure.  The mode imports the built-in modes for HTML, PHP and Javascript so in theory these should all be highlighted correctly as well.

Feel free to download it and try it out it but please bear in mind it is only a stop-gap measure and is by no means perfect. If you have any good suggestions as to how it could be improved, leave a comment below and I will try and update it when I get a moment to spare.

To Install

Download and unzip the syntax mode then place ‘expressionengine.mode’ in ‘User > Library > Application Support > Coda 2 > Modes’ and restart Coda 2.  You can use any of the default colour stylesheets ('Coda > Preferences > Colors') although it was developed using Coda Bright.  You could also export, adapt and re-import any of these stylesheets to colour it to your taste.  I have added the stylesheet that I use below - it is more or less identical to Coda Bright except I have made the 'channel entries' tag and 'channel forms' tags bold.  Add it by dragging the .sss file to the Coda logo in your dock and selecting 'Coda EE2' from the dropdown menu.

Download v1.3

Coda EE2.sss

Changelog

1.0 - Initial release

1.1 - Fixed autocomplete for closing channel entries tag.  Adjusted class for !=  and = signs.

1.2 - Updated to work with Coda 2.0.2

1.3 - Updated for Coda 2.5 and with latest EE tags

Add your comment

Remember me?

Notify me of follow-up comments?

Thanks so much for putting this together, it’s so nice to have my PHP and EE tags coloured. Perhaps if you could put it up on Github, people could collaborate on it? :)

Posted by Mazil on Monday, 9th July 2012 at 12:14AM

That’s fine - glad it is useful.  I had thought about doing that but was a bit hesitant because some of the code came from other syntax modes which weren’t my work.  Maybe I’ll try and track down the sources for all the snippets that I borrowed and see what they think.  That said, if anyone does improve upon what I have uploaded please feel free to feed it back and I can update the link.

Posted by Mike on Monday, 9th July 2012 at 1:44PM

Thank you very much, Michael! Very nice to have this for Coda 2.

Posted by Wolfram on Wednesday, 11th July 2012 at 9:19AM

Thanks for putting this together! I definitely missed the EE syntax highlighting after switching from CODA1 to CODA2. Is there a dark version?

Posted by Mike on Wednesday, 11th July 2012 at 12:23PM

Hi Mike.  Whilst there isn’t a specific dark version, the syntax mode picks up on CSS classes used by Coda’s included stylesheets under Coda > Preferences > Color.  The ‘Specials board’ stylesheet is dark but it may not be to your taste. 

It is really straight forward to create your own color scheme though, just export out an existing stylesheet, change the extension to .css and edit the styles to the colours you want.  When you have finished, change the extension back to .sss and import it back as a new stylesheet.  It may take a bit of trial and error to work out which class effects which types of syntax but it should be fairly painless!

Posted by Mike on Wednesday, 11th July 2012 at 12:42PM

I have his installed in the correct folder and the ExpressionEngine syntax mode selected but it doesn’t seem to change anything? Any ideas? I am using a dark color theme, but when I change to the default It doesn’t work either.

Posted by Mike on Wednesday, 11th July 2012 at 12:58PM

This mode is based on the ‘Coda Bright’ stylesheet that comes installed with Coda 2 but it should work with all of the default schemes as they all use the same class names.

Posted by Mike on Wednesday, 11th July 2012 at 1:01PM

Michael, sorry to bother you with this! The problem was that I still had the CODA 1 syntax file in the same folder as yours. When I removed it the syntax highlighting worked for the CODA Bright stylesheet. I’ve been using a third party dark theme and it unfortunately doesn’t work with that. This is not your problem though! :) thanks again for creating this and for your help.

Posted by Mike on Wednesday, 11th July 2012 at 1:38PM

Thank you, this is great.  I had this in Coda 1.  Pumped to get it in Coda 2 now.

Posted by Mike on Wednesday, 11th July 2012 at 3:21PM

Thank you!

I actually installed coda 1 on Monday due to be there not being EE syntax and its buggy as hell! Disappinting from Panic!

Away to give this a try though and put up with the bugs!

Install instructions would be great as well,

Thanks again!

Posted by John Macpherson on Wednesday, 11th July 2012 at 4:25PM

Thanks for putting this together Mike… I too tried this and ended up scratching my head for a while. You’d think Panic would have released some sort of documentation for this, no?

Posted by Nuno Albuquerque on Wednesday, 11th July 2012 at 9:35PM

I know - I searched for ages for any clue as to what I should be doing but in the end it came down to trial and error and picking existing modes apart.  As a result its not perfect but its definitely better than nothing and I’m glad that others are finding it useful as well. Thanks for all the comments.

Posted by Mike on Thursday, 12th July 2012 at 7:00AM

Big thanks for putting this together!

A small question, where I might be wrong.
In the commenting function, you are using the HTML-mode <!——>
If I’m not all wrong, the syntax {!——} is better within EE to ensure commenting?

/patrick

Posted by Patrick on Thursday, 12th July 2012 at 3:54PM

Hi Patrick. I totally agree, I really wanted the default commenting tags to be {!——} but in the time I had I couldn’t figure out how to change this.  If anyone can fill me in me I’ll update it otherwise I’ll try and figure it out next time I have a chance to look at it.

Posted by Mike on Thursday, 12th July 2012 at 4:00PM

Thank you so much, was searching everywhere for this!

One question, I am using Coda Bright, but have customised the colours in the preferences. However I have not been able to change the colours for your mode. I looked in the package contents, and changed any colour values I could find, but no luck, it just displays red at all time. Any idea? or perhaps you could explain how to edit the colours in the mode?

Thanks again!

Posted by Chris Davies on Thursday, 12th July 2012 at 7:24PM

Hi Chris. The Hex values in the XML file aren’t actually how Coda 2 sets the colours anymore (they are used for Coda 1 I think).  To change the colours you need to duplicate a default stylesheet and edit the CSS classes directly.  I ran through the process in a comment 11 up from this one so hopefully that’ll give you the idea.

Posted by Mike on Friday, 13th July 2012 at 12:04PM

Thanks for your work on this, this will be really helpful in my future projects!

If I may make a suggestion, since a lot of EE tags match PHP conventions, maybe you could use the same colors where applicable. For example, EE variables and if/else statements could use the same colors as their PHP counterparts.

I say this because I’m using the “Specials Board” dark color scheme which makes the EE tags look like string data, and channel:entries tags look like syntax errors.

Thanks for sharing your work!

Posted by Matt on Tuesday, 17th July 2012 at 2:28PM

Hi Matt,  Thanks for your suggestion.  I can see your point that the colours would be better replicating PHP when using specials board.  It may be better for me to create a dark stylesheet for use with this syntax mode.  I’ll try and take a look at this next time I get a chance and post it.

Posted by Mike on Friday, 20th July 2012 at 4:22PM

Thanks for putting this together!

Posted by Ikaika Hussey on Friday, 27th July 2012 at 2:17AM

Thanks for the warning Mazil.  I’ll try and take a look at it once the Coda update is available via the App store which knowing Apple may be some time!

Posted by Mike on Friday, 3rd August 2012 at 6:23AM

The syntax mode is now updated to work with Coda 2.0.2.

Posted by Mike on Saturday, 4th August 2012 at 6:28AM

You rock! Awesome! Thank you so much for doing this, I was just like do googling almost daily for it :)

Posted by Sven Tilburg on Saturday, 4th August 2012 at 7:02PM

Sweet! Thanks very much :D

Posted by Mazil on Sunday, 5th August 2012 at 11:52PM

I was looking for an editor for Expression Engine templates as converting a site from raw PHP to EE-based templating….was beginning to get painful and daunting to look at.

Trying out Coda 2 now thanks to your syntax mode. Wonder if they could cut you some credit somehow if I end up buying? ;-)

Thanks for this =)

Posted by Abed on Tuesday, 2nd October 2012 at 5:16PM

Really useful thanks for this.

Posted by James Curran on Thursday, 8th August 2013 at 8:37PM

Hi. I’m running Coda 2.0.11, and have not been able to get the mode to work. I relaunched at reinstall. Have you noticed problems with 2.0.11? Do you have any troubleshooting suggestions? Thanks in advance!

Posted by Maria De La Guardia on Wednesday, 30th October 2013 at 7:26PM

Hi Maria, I’ve just upgraded to v 2.0.11 and it still seems to be working for me so I’m not entirely sure.  Is the EE syntax mode option showing up for you under Text > Syntax mode > ExpressionEngine or is nothing showing at all?

Posted by Mike on Thursday, 31st October 2013 at 8:11AM

Coda 2.5 has just been released!
The mode doesn’t seem to work anymore….

Posted by joe on Thursday, 23rd October 2014 at 8:28AM

Hi Joe.  I think it should work fine albeit with a few minor highlighting changes.  I found I needed to re-enable the syntax mode and set it as my default for html files again.  Hope that sorts it!

Posted by Mike on Thursday, 23rd October 2014 at 8:45AM

I’ve just updated to Coda 2.5. I managed to get this working almost – I followed your instructions above. All looks great except channel:entries tags get highlighted red – as in white text on a solid red background – which makes them look like errors. I don’t seem to have a Library > Application Support > Coda 2 folder so not actually sure where this plugin has gone! Any help would be appreciated – this plugin has been a huge help for me!

Posted by Frank Harrison on Friday, 31st October 2014 at 12:31AM

Hi Frank, Yes - I think that is the main difference after the upgrade.  I may delve back in at some point and add any new EE tags etc.. that have been added since I released the plugin and take a look at the rather over highlighted channel entries tag.  I don’t have the opportunity right now but I’ll add it to my to-do list!

Posted by Mike on Friday, 31st October 2014 at 8:44AM

Thanks Mike. Do you know if Coda 2.5 has moved where it stores plugins? I’d be happy to try editing your one, but I can’t seem to find it!

Posted by Frank Harrison on Friday, 31st October 2014 at 9:48AM

Hi Frank.  OK - I have also created an alternative .sss file that will remove the background on the channel tag (in the article).  Just download the file and drag it on to your Coda 2 icon on the dock .  It should open a menu on Coda where you can select ‘Coda EE2’.  You can always tweak the colors manually from this panel if you want. I have also updated the syntax mode to include a few newer EE tags.

Posted by Mike on Friday, 31st October 2014 at 11:50AM

Amazing – thank you!

Posted by Frank Harrison on Friday, 31st October 2014 at 12:14PM

I may be wrong, but I’m pretty sure that the download button which says v1.3, with the update for Coda 2.5, is actually giving me v1.0.

Posted by Eric on Tuesday, 2nd December 2014 at 4:48PM

I think that the lack of version number on the zip may have caused confusion.  It is the latest but is named the same as the original.  I have amended the zip file name to make it clearer.

Posted by Mike on Tuesday, 2nd December 2014 at 5:03PM

Not working for me in Coda 2.5.1
Installed in User > Library > Application Support > Coda 2 > Modes

Restarted Coda, the EE tags are not highlighting.

Posted by Daniel on Thursday, 4th December 2014 at 1:30PM

It should work.  In Coda 2.5 you also need to enable it from coda > preferences > plugins. Hope that does the trick.

Posted by Mike on Thursday, 4th December 2014 at 2:57PM

When installing it, it shows the 1.0 version installed and I don’t get any syntax highlighting.

Shouldn’t it show 1.3?

Posted by Jason on Tuesday, 10th February 2015 at 6:21PM

Hi Jason,

Try re-downloading it now. 

Mike

Posted by Mike on Tuesday, 10th February 2015 at 7:43PM

After trying a few times Coda only ever displays version 1.0 as installed, not 1.3. Any ideas?

Thanks a lot for your work on this, it’s a life saver, I hope I can get it working again on Coda 2.5.8.

Posted by Matt on Monday, 20th April 2015 at 12:40PM

Hi Matt.  I’m running it on 2.5.8 without any issues.  Make sure you delete the old .mode file before re-downing and installing. It might be worth right clicking on the ExpressionEngine .mode file, selecting ‘Show package contents’ and drilling down until you see info.plist which will states which version it is just to be sure.

Posted by Mike on Monday, 20th April 2015 at 1:43PM

A tip if people are running into trouble, set the syntax mode for a file to ExpressionEngine: Text > Syntax Mode > ExpressionEngine

Posted by Greg on Friday, 4th March 2016 at 1:54PM

Michael's Paintings

The High Sierra

The High Sierra
46 x 46 cm
Acrylics, ink and cotton on canvas

Michael's photos

Chinese Tea Bricks

Chinese Tea Bricks

Featured Web Project

NewOfficeAmerica.com inner page

Project: NewOfficeAmerica.com
URL: http://www.newofficeamerica.com/