h1. spf_codemirror

p. I'm no longer able to develop this plugin due to ill health. If anyone would like to take over, message me, and I'll transfer the source.

p. "CodeMirror":http://codemirror.net syntax-highlighting and "Emmet":http://docs.emmet.io code-completion plugin for Textpattern admin.

p. Edit pages, forms, css, javascript (and more) full-screen, in your browser, with a choice of syntax-highlighting and code-completion.

p. Customisable via preferences: choose a theme, font-size and full-screen hot-keys.

h2. Screenshot

!https://cloud.githubusercontent.com/assets/957157/6716534/1b268b72-cd9e-11e4-894a-48aed551702d.jpg!

p. Screenshot of Plugin Composer using the solarized-light theme.

h2. Features

Adds "CodeMirror":http://codemirror.net syntax-highlighting to textareas in Textpattern's Forms, Pages and Style tabs;

Also to JavaScript tab ("spf_js":http://forum.textpattern.com/viewtopic.php?id=37849 required), Plugin Composer ("ied_plugin_composer":http://forum.textpattern.com/viewtopic.php?id=14898 required) and External Files tab ("spf_ext":http://forum.textpattern.com/viewtopic.php?id=38032 required);

Basic preferences via Admin > Preferences > Advanced;

Code-completion added to HTML & CSS courtesy of "Emmet":http://docs.emmet.io.

h2. Upgrading from previous versions

This version of the plugin (1.0) requires version 5.0 of CodeMirror. If you have an older installation, trash it.

h2. CodeMirror installation

"Download the latest release":http://codemirror.net/codemirror.zip of CodeMirror, unzip, and upload the entire directory (perhaps renaming it to 'codemirror') to your web server.

The default location is your-web-root/codemirror - accessible via http://your.server/codemirror.

If you chose an alternative location (e.g. a 'vendor' directory) you need to set it in the Prefs.

Install the plugin: spf_codemirror.txt from the "spf_codemirror repo":https://github.com/spiffin/spf_codemirror.

Check the Prefs (Admin > Preferences > Advanced), leave Emmet disabled (see next step), and activate.

h2. Emmet installation

Download emmet.min.js from the "spf_codemirror repo":https://github.com/spiffin/spf_codemirror - or "build your own with npm and gulp":https://github.com/emmetio/codemirror

Put emmet.min.js inside your codemirror directory. That's it.

Emmet is disabled by default (for speed).

You can enable/disable it in the Prefs (Admin > Preferences > Advanced).

h2. CodeMirror/Emmet upgrade

You can now easily upgrade CodeMirror (5.0 as of March 2015).

"Download the latest release":http://codemirror.net/codemirror.zip, unzip, and replace your old codemirror directory.

To upgrade Emmet, go to the "CodeMirror plugin repo":https://github.com/emmetio/codemirror, and follow the build instructions. Make sure the js file is minified and named emmet.min.js.

Upload emmet.min.js to the codemirror directory on your server - replacing your previous version.

h2. Emmet notes

Initiate completion by hitting TAB (or Cmd+E).

Try typing this: @div#page>div.logo+ul#navigation>li*5>a@ and then TAB.

Works with opening and closing Textpattern tags (try typing @txp:if_section@ and then TAB).

CSS shortcuts work even better with Emmet* - try typing m and then TAB in Styles.

"Emmet documentation":http://docs.emmet.io.

h2. Version history

1.0 - March 2015

• Changes for CodeMirror 5.0
• Added support for Plugin Composer (add a commented PHP tag: //<?php at start to enable)
• Removed Minify support
• Enable or disable Emmet (for speed)

0.9 - October 2014

• Changes for CodeMirror 4.6

0.8 - January 2013

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

0.7 - November 2012

• Code clean-up, CSS tweaks & "Emmet documentation":http://docs.emmet.io.

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.