CodeMirror Syntax Highlighting Extension

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.

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

Currently the extension has the following features:

  • Adds a ribbon button to enable or disable the functionality.
  • Syntax Highlighting support for Compound Templates, C# Fragments, XSLT, VBScript, JScript, Dreamweaver (HTML) and Razor 
  • 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
  • Support for Tridion 2011 & 2013

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:

tridion codemirror

Installation Instructions

  1. Download the package below or use the sources from GitHub and build them (On build of the BuildingBlocks.Tridion2011Extensions.CodeMirror project, there is a post build event which copies the needed files to C:\Extensions\CodeMirrorExtension).

  2. Take the files in that folder and put them on the Content 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%\web\WebUI\WebRoot\Configuration\System.config (remember to update installPath element to the directory from Step 2.)

    <editor name="CodeMirrorExtension">
        <installpath>C:\CodeMirrorExtension\</installpath>
        <configuration>CodeMirrorExtension.config</configuration>
        <vdir>CodeMirror</vdir>
    </editor>

  5. Update the modification attribute on the server element in order to rebuild the javascript

    <server version="6.1.0.55920" modification="37">

  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!)


Developer
Company
License agreement
:    MIT License
Tags
:    syntax,  highlighting,  2011,  2013,  codemirror
Version
:   0.32
Source
:   Yes

About the Author
Rob Stevenson-Leggett
Senior Developer

Rob Stevenson-Leggett is a Senior Developer at Building Blocks. He has been working professionally in web development since 2006. He has worked with various Web Content Management software and has been focusing on SDL Tridion recently. He generally shares his knowledge on the Building Blocks blog. Outside of programming he is a keen snowboarder and runner.

Building Blocks