Disable Template Syntax Highlighting in Movable Type 4

One of the more challenging pieces of the Movable Type administration interface in version 4 is the syntax highlighting when you are editing your templates. That’s not to say that the highlighting is entirely bad, because it can be nice, and brighten your day. Rather than having a plain old black and white text box, you get colors, and line numbers, and it does make things work a bit better. In 4.0, however, you had problems with cutting and pasting. Though improved in 4.1, there are still some problems – notably slow load times.

While you can disable the syntax highlighting (known as CodePress) by clicking on a button, the problem is that the script still loads and processes the data on-screen before disabling the editor, meaning that load times can still be slow. What’s worse is that the preference is stored in a cookie, so if you’re on another computer, or if another user logs in, the highlighting comes right back. Because of this, I’ve seen repeated requests on disabling the highlighting permanently. Unfortunately, you can’t just remove the codepress directory or you’ll get an error and be unable to edit your templates at all. Luckily, there is a solution.

While it’s not terribly difficult, you should know three things.

First, this requires editing a source file. There is unfortunately no way to make a plugin to do this job. Actually, I could distribute the file as a plugin, but it’s not a pretty way of doing it, and I think that it’s better to understand what you are doing, so I’ll explain what is happening instead.

Second, because you are editing a source file, you should make a backup. Don’t worry, I’ll let you know what files you need to back up, but you should be aware of it up front.

Third, unlike the cookie, this change will affect all users unless you change back at some point in the future. That is the whole point, after all, but if someone calls wanting to know what happened to their colors and line numbers, you’ll know how to fix it.

Still ready to proceed? Then read on.

What you’ll need to to is edit the mt.js file. This is the primary JavaScript file for the Movable Type installation, and in it you have the commands that call the CodePress syntax highlighter. There are two ways that we can disable the editor. One is a bit less draconian than the other, and both will help you understand what is happening, so I’ll go over them here.

CodePress Still Loads, Just Disabled

For this, locate eventIframeLoaded on line 2321 of an unaltered mt.js. And don’t forget to make a backup before changing anything! Once you do, change the lines to look like this:

 eventIframeLoaded: function( event ) {
  this.editor = this.iframe.contentWindow.CodePress;
  /* ugly bug in codepress, if setCode is called with nothing then it breaks */
  if ( this.textarea.value != '' )
   this.editor.setCode( this.textarea.value );
   this.toggleOff();
  }

You can make your changes either by removing the lines you don’t need, or just by commenting out the lines that you don’t want to execute (place a double slash // in front). But whatever the case, leave the lines you see here as the only ones to execute.

What we are doing is starting the bare minimum required – calling the editor, setting the content of the editor, and then toggling it to an “off” state, as if we have decided to turn it off via cookie. But we aren’t actually checking the cookie in this case, we are just unconditionally turning it off.

If you choose to use this method, you still have CodePress installed, and it will take roughly half the time it did (depending on a number of variables). As such, and since you can’t access CodePress, it may not be the best solution. But it does allow you some improvement, however small.

Getting Rid of CodePress Entirely

If you decide that you just don’t want CodePress at all, there is another solution that you should use instead.

For this change, locate edit: function, which is on line 2355 of an unaltered mt.js. Again, make a backup before changing anything! Once you do, change the lines in this routine to look like this:

 edit: function( obj, language ) {
  if ( obj ) {
   var el = DOM.getElement( obj );
   this.textarea.value = ( el ) ? el.value : obj;
  }
  if ( !this.textarea.disabled )
   return;
  this.textarea.disabled = false;
 },

Don’t forget that comma at the end, and the three other lines (language, iframe and DOM.addEventListener) can either be deleted or commented out, as before.

What we are doing here is skipping the loading of CodePress entirely, and just re-enabling the textarea. As such, once you have made this change, you can actually remove the codepress directory from your installation if you so choose (you should make sure that you have a backup). You can also just rename it if you would like to test things out for a while first.

In this case, the template editor will act like a simple form with a textarea and you should see a fairly dramatic improvement in speed, rather than the slight improvement of the first method.