A syntax-highlighting plugin for Textpattern admin – now with Zen Coding/Emmet (HTML & CSS).

Preferences can now be set for theme, font-size and full-screen hot-keys.

Background

This was a quick update to Dale Chapman’s mrd_codeMirror which, in turn, was prompted by my CodeMirror admin theme and, of course, Marijn Haverbeke’s CodeMirror. Now with Zen Coding goodness thrown in.

Thanks to Marijn, Sergey and Dale.

Features

1. Adds CodeMirror syntax-highlighting to textareas in Textpattern’s Forms, Pages and Style tabs;
2. Also to JavaScript tab (spf_js required) and External Files tab (spf_ext required);
3. Basic preferences via Admin > Preferences > Advanced;
4. HTML/CSS shorthand/code-completion now added to Pages, Forms & CSS courtesy of Zen Coding/Emmet.

Installation

1. DOWNLOAD and unzip;
2. Upload the containing ‘codemirror’ directory to your web root:
   • codemirror
   • css.php
   • files
   • images
   • index.php
   • rpc
   • sites
   • textpattern
3. Install and activate the plugin (spf_codemirror.txt – inside the unzipped folder).
4. NOTE: the folder structure mirrors that of a standard CodeMirror download (just the ‘lib’, ‘mode’ and ‘theme’ directories) with the addition of the minified emmet.min.js file from Emmet-CodeMirror2 – for easy upgrade.

Upgrade to a newer version of CodeMirror

1. You can now easily upgrade CodeMirror (2.35 as of Nov 2012).
2. Download the latest release.
3. Unzip the download and upload the containing ‘lib’, ‘mode’ and ‘theme’ directories to the codemirror directory on your web server.
4. To upgrade Emmet (Zen Coding) download ‘Emmet-CodeMirror2’ from here, unzip it and upload the containing ‘emmet.min.js’ file to your codemirror directory.

Minify support

1. If you have Minify on your web server in the standard DOCUMENT_ROOT/min location, spf_codemirror will use it to minify css & js – if you don’t, it won’t.

Zen Coding notes:

1. Initiate completion by hitting TAB (or Cmd+E).
2. Try typing this: div#page>div.logo+ul#navigation>li*5>a and then TAB.
3. Works with opening and closing txp tags (try typing txp:if_section and then TAB).
4. CSS shortcuts work even better with Emmet* – try typing m and then TAB in Styles.

*Emmet is the new name for Zen Coding.

Notes & issues

1. Basic preferences (theme, font-size, full-screen hot-keys) are available via Admin > Preferences > Advanced.
2. Textarea resizing is disabled (enabling gives erratic results);
3. Plugins editor not supported;
4. Code-folding requires input to the Javascript (which lines to fold) and is therefore disabled.

Version history

0.8 – January 2013

• Changes for CodeMirror 3.01 & Emmet 1.3.3
• Added match-highlighter feature for Pages, Forms & Javascript.
• Fixed search in full-screen mode.

0.61 – November 2012

• Fixed Minify issue with ‘public’ and ‘private’ URLs (‘ihu’ v ‘hu’).

0.6 – November 2012

• Re-written for Textpattern 4.5.1.
• Upgraded to CodeMirror 2.35 and Emmet.
• Full-screen support – hit F5 (and Esc to exit).
• Basic preferences via Admin > Preferences > Advanced.
• CodeMirror folder structure now mirrors standard CodeMirror for easy upgrades.
• Automatic Minify support.

0.5 – May 2012

• CSS support for Zen Coding within style tags.

0.4 – May 2012

• Added code block indicators: spf_codemirror START/END.
• Code cleanup.

0.3 – May 2012

• Added Zen Coding code completion to Pages and Forms (HTML).
• Upgraded to CodeMirror 2.25.

0.2 – May 2012

• Changed load order (to allow interaction with other plugins).

0.1 – May 2012

• first release.