spf_codemirror

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.

CodeMirror syntax-highlighting and Emmet code-completion plugin for Textpattern admin.

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

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

Screenshot

Screenshot of Plugin Composer using the solarized-light theme.

Features

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

Upgrading from previous versions

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

CodeMirror installation

1. Download the latest release of CodeMirror, unzip, and upload the entire directory (perhaps renaming it to ‘codemirror’) to your web server.
2. The default location is your-web-root/codemirror – accessible via http://your.server/codemirror.
3. If you chose an alternative location (e.g. a ‘vendor’ directory) you need to set it in the Prefs.
4. Install the plugin: spf_codemirror.txt from the spf_codemirror repo.
5. Check the Prefs (Admin > Preferences > Advanced), leave Emmet disabled (see next step), and activate.

Emmet installation

1. Download emmet.min.js from the spf_codemirror repo – or build your own with npm and gulp
2. Put emmet.min.js inside your codemirror directory. That’s it.
3. Emmet is disabled by default (for speed).
4. You can enable/disable it in the Prefs (Admin > Preferences > Advanced).

CodeMirror/Emmet upgrade

1. You can now easily upgrade CodeMirror (5.0 as of March 2015).
2. Download the latest release, unzip, and replace your old codemirror directory.
3. To upgrade Emmet, go to the CodeMirror plugin repo, and follow the build instructions. Make sure the js file is minified and named emmet.min.js.
4. Upload emmet.min.js to the codemirror directory on your server – replacing your previous version.

Emmet 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 Textpattern 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.
5. Emmet documentation.

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.

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.