CKEditor CodeMirror module

CKEditor CodeMirror module adds syntax highlighting for "Source View" in CKEditor WYSIWYG editor using CKEditor CodeMirror Plugin.

Drupal 8

Dependencies

Installation

  1. Download and install the Libraries API module.
  2. Download and install CKEditor CodeMirror module.
  3. Download CKEditor-CodeMirror-Plugin library to the following directory libraries/ckeditor.codemirror. Path to plugin.js file should be libraries/ckeditor.codemirror/plugin.js.

Configuration

  1. Go to "Administration » Configuration » Content authoring » Text formats and editors" (admin/config/content/formats) page.
  2. Click "Configure" for any text format using CKEditor as the text editor.
  3. Under "CKEditor plugin settings", click "CodeMirror" and check "Enable CodeMirror source view syntax highlighting". Make sure that the current toolbar has the "Source" button. Adjust other settings as desired.
  4. Scroll down and click "Save configuration".
  5. Go to node create/edit page, choose the text format with CodeMirror plugin. Press the "Source" button.

Drupal 7

Dependencies

Installation

  1. Download and install CKEditor and Libraries API modules.
  2. Download and install CKEditor CodeMirror module.
  3. Download CKEditor-CodeMirror-Plugin library to the following directory sites/all/libraries/ckeditor.codemirror. Path to plugin.js file should be sites/all/libraries/ckeditor.codemirror/plugin.js. Note: Latest version of module will offer to do this for you automatically.
    Use drush ckeditor-codemirror-download (or drush ccmd) command to download the library.

Configuration

  1. Go to "Administration » Configuration » Content authoring" (admin/config/content/ckeditor) page and edit any CKEditor profile.
  2. Under "Editor appearance" section scroll down to "Plugins" list, enable "CodeMirror (Source) Syntax Highlighting" plugin. Make sure that the current toolbar has the "Source" button. Save the profile.
  3. Go to node create/edit page, choose the text format with CodeMirror plugin. Press the "Source" button.

Project Information

Downloads