SDL Tridion 2011 GUI Extension: Adding Syntax Highlighting to the Template Building Block editor

Using SDL Tridion every day, one of the features I use the most is the Source Editor within the Content Management Explorer. This is a flat text area in which code is written. While it is fine for simple Template Building Blocks, once you have a complex Page Template Dreamweaver TBB for example, it can get a bit hard to work with the code, especially since the tab key does not behave as you are used to within your favourite text editor. Of course, you could use Dreamweaver (I personally don't), or copy and paste the code into another editor, however sometimes it is necessary to work within the editor in the web interface.

A screenshot of the source editor

To improve this I have developed a GUI Extension for SDL Tridion 2011 and have just released the alpha version as open source on GitHub.

Currently the extension has the following features:

  • Adds a ribbon button to enable or disable the functionality.
  • HTML syntax highlighting
  • Support for tabbing within the editor (even multiple lines!)
  • Razor syntax highlighting (if you have the Razor mediator installed, thanks to James Simm for this functionality)
  • Highlighting component fields within HTML mode

The extension utilises the fantastic CodeMirror script which should allow extension with different modes and additional functionality.

Here's a screenshot of the extension in action:

Source editor with plugin applied

To install the extension follow these instructions:

  1. Download the zip file from here:
  2. Take the files in that folder and put them on the Conent Management Server in a folder of your choosing.
  3. In IIS, create a virtual directory under the %SDL Tridion 2011 Website%Editors called CodeMirror pointing to the directory from Step 2
  4. Add the following lines to the config in %TridionDir%webWebUIWebRootConfigurationSystem.config (remember to update installPath element to the directory from Step 2.)
  5. Update the modification attribute on the server element in order to rebuild the JavaScript [code][/code]
  6. Open a Template Building Block, all being well you should see a new 'Enable Code Mirror' button on the Ribbon Toolbar.
  7. Switch to the source tab and click 'Enable Code Mirror' to begin editing! (P.S You can now use the TAB key as it was intended!)

We have some plans for additional functionality in the pipeline such as:

  • Tridion 2009 Support
  • Full Dreamweaver Syntax Highlighting
  • Autocomplete for Razor and Dreamweaver
  • Syntax checking for DWTs
  • Inline documentation
  • Autocomplete Component or Page fields based on a schema
  • C# Syntax Highlighting

Thanks for reading. We would be really appreciative if the Tridion community could try this out and give us some feedback, or even contribute by submitting GitHub pull requests!

Any questions?

If you need more information or have any questions just get in touch and we'd be happy to answer them for you.