Syntax Highlighting Code Editor for WordPress Core

Description

This project is adding CodeMirror functionality to the Plugin and Theme file editors, as well as the Customizer Custom CSS box and the Custom HTML widget.

This is currently a Work In Progress playground for experimenting with bringing syntax highlighting to WordPress Core.

We’re working around discussion on a Core ticket, #12423

Getting Started

You can locate a ZIP for this plugin on the releases page on GitHub. To install, simply go to your WP Admin and Plugins > Add New. Then click “Upload Plugin” and select the codemirror-wp.zip you downloaded from the releases page. Then click “Install Now” and on the next screen click “Activate Plugin”. Note on upgrading: If you want to update the plugin from a previous version, you must first deactivate it and uninstall it completely and then re-install and re-activate the new version (see #9757 for fixing this).

Otherwise, to set up the plugin for development: clone this repository and run npm install to download CodeMirror and other assets.

cd wp-content/plugins/
git clone --recursive https://github.com/WordPress/codemirror-wp.git
cd codemirror-wp
npm install

Also install the pre-commit hook via:

`bash

cd .git/hooks && ln -s ../../dev-lib/pre-commit pre-commit && cd –
`

Any questions, reach out to #core-customize on WordPress.org Slack or better open an issue on GitHub!

Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there.

Creating a Release

Contributors who want to make a new release, follow these steps:

  1. Bump plugin versions in package.json (×1), package-lock.json (×1, just do npm install first), readme.txt (×1 in Stable Tag), and in codemirror-wp.php (×2: the metadata block in the header and also the CodeMirror_WP::VERSION constant).
  2. Run npm run build-release-zip to create a codemirror-wp.zip in the plugin’s root directory.
  3. Create new release on GitHub targeting master, with the new plugin version as the tag and release title, and upload the codemirror-wp.zip as the associated binary. Publish the release.

Contributors & Developers

“Syntax Highlighting Code Editor for WordPress Core” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

[0.3.0](https://github.com/WordPress/codemirror-wp/releases/tag/0.3.0) – 2017-08-18

  • Enable line-wrapping and constrain width for file editor to match textarea. See #33, #5, #32.
  • Improve accessibility of CodeMirror in Customizer’s Additional CSS, including escape method from Tab trap. See #34 and #29.
  • Improve file organization to prepare for core merge.
  • See full commit log and diff: 0.2.0…0.3.0

[0.2.0](https://github.com/WordPress/codemirror-wp/releases/tag/0.2.0) – 2017-08-16

  • Add user setting for disabling Syntax Highlighting. See #31.
  • Improve release builds.
  • See full commit log and diff: 0.1.0…0.2.0

[0.1.0](https://github.com/WordPress/codemirror-wp/releases/tag/0.1.0) – 2017-08-14

Initial release.