The CodeMirror Editor
Integrates the CodeMirror code editor library into Drupal, providing syntax highlighting and code editing capabilities for text areas, fields, and text formats.
codemirror_editor
Install
composer require 'drupal/codemirror_editor:^2.0'
Overview
The CodeMirror Editor module integrates the popular CodeMirror JavaScript library into Drupal, enabling advanced code editing features with syntax highlighting for various programming languages.
The module provides multiple integration points: a text editor plugin that works with Drupal's Editor module for WYSIWYG-style configuration, a field widget for editing code in string_long and text_long fields, a field formatter for displaying code with syntax highlighting, and a text filter for adding syntax highlighting to content using <code data-mode="..."> tags.
CodeMirror includes 50+ color themes (like Monokai, Dracula, Material, Solarized), support for 12 programming languages out of the box (including PHP, JavaScript, CSS, HTML, Python, SQL, YAML, Twig, and more), and features like line numbers, code folding, auto-closing tags, fullscreen mode, and a customizable toolbar with formatting buttons.
The library can be loaded from CDN (default) or installed locally using the provided Drush command. The module also provides a plugin system allowing other modules to add custom language modes.
Features
- Text Editor plugin that integrates with Drupal's Editor module for text format configuration
- Field widget for string_long and text_long fields enabling code editing with syntax highlighting
- Field formatter for displaying code with read-only syntax highlighting in field output
- Text filter that converts <code data-mode="mode">...</code> tags into syntax-highlighted code blocks
- Custom form element (#type => 'codemirror') for use in custom forms
- Support for 12 built-in language modes: C-like, CSS, HTML mixed, JavaScript, Markdown, PHP, Python, Ruby, SQL, Twig, XML, and YAML
- 50+ color themes including Monokai, Dracula, Material, Solarized, Eclipse, and more
- Configurable toolbar with buttons for bold, italic, underline, lists, links, horizontal rule, undo/redo, clear formatting, and fullscreen toggle
- Line numbers, line wrapping, code folding (fold gutter), auto-closing tags, and active line highlighting options
- CDN loading (default) or local library installation with Drush command
- Language mode persistence via cookies across page loads
- Keyboard shortcuts: Ctrl+D to duplicate line, Ctrl+/ to toggle comments, F11 for fullscreen, Esc to exit fullscreen
- Plugin system for language modes allowing other modules to define custom modes via YAML files
- HTML/Twig overlay mode for editing Twig templates with proper highlighting
Use Cases
Code Snippet Storage in Content
Create a 'Code Snippet' content type with a text_long field using the CodeMirror widget. Authors can write code with syntax highlighting support, and the content is displayed using the CodeMirror formatter to show properly highlighted, read-only code blocks to visitors.
Custom Module/Theme Development
When building admin interfaces that require code input (such as custom CSS fields, template overrides, or configuration in code format), use the #type => 'codemirror' form element to provide developers with a proper code editing experience.
Documentation and Tutorial Sites
Enable the CodeMirror text filter on a text format and allow content authors to embed code examples in their content using <code data-mode="php">...</code> tags. The code will be automatically syntax-highlighted when displayed.
Configuration Export Interface
Use the CodeMirror editor plugin with YAML mode for text areas that display or edit YAML configuration, providing proper highlighting for Drupal configuration files.
Twig Template Editing
The module includes a special HTML/Twig overlay mode that properly highlights Twig syntax within HTML templates, making it suitable for interfaces where users edit Twig templates directly.
Tips
- Use keyboard shortcuts for faster editing: Ctrl+D duplicates the current line, Ctrl+/ toggles comments, F11 enters fullscreen mode, and Esc exits fullscreen
- The selected language mode is saved in a cookie per-textarea, so users' mode preferences persist across page loads
- When using Composer with bower-asset/codemirror, remember to disable the 'minified' option in module settings as Composer-installed packages typically include only non-minified files
- Custom modules can add new language modes by creating a MODULE_NAME.codemirror_modes.yml file with the mode definition
- The CodeMirror text filter expects code wrapped in <code data-mode="mode">...</code> tags - the data-mode attribute specifies the language for syntax highlighting
- For fields that should allow users to switch between different code languages, the toolbar provides a mode selector dropdown when multiple modes are enabled
Technical Details
Admin Pages 1
/admin/config/content/codemirror
Configure global settings for the CodeMirror editor including library loading method, theme selection, and enabled language modes.
Permissions 1
Hooks 2
hook_codemirror_mode_info_alter
Alters the list of CodeMirror language modes. Use this hook to ensure specific language modes are always loaded by adding module names to the 'usage' array.
hook_codemirror_editor_assets_alter
Alters the list of CodeMirror assets (JavaScript and CSS files). Use this to add additional CodeMirror addons or custom assets. For requiring language modes, hook_codemirror_mode_info_alter() is preferable.
Drush Commands 1
drush codemirror:download
Downloads the CodeMirror library from CDN to the local libraries/codemirror directory. This command fetches all required JavaScript and CSS files based on the current configuration (enabled modes, theme, addons).
Troubleshooting 5
Ensure the module is properly installed and the library is either being loaded from CDN (check the 'Load the library from CDN' setting) or installed locally. If using local installation, run 'drush codemirror:download' to download the library files.
This is a known issue when the parent form is rendered within a cache placeholder by BigPipe. Consider excluding the form from BigPipe caching or adjusting your caching strategy for forms using CodeMirror.
When using local installation, ensure all required files exist in libraries/codemirror/. Run 'drush codemirror:download' to automatically download all required files. The Status Report page (/admin/reports/status) will show an error if files are missing.
Go to Administration > Configuration > Content authoring > CodeMirror and enable the desired language mode in the 'Language modes' section. Some modes have dependencies that will be automatically loaded.
The theme setting is global and cannot be changed per-textarea. Ensure the correct theme is selected in the module configuration. If using local installation, verify the theme CSS file exists in libraries/codemirror/theme/.
Security Notes 4
- The Editor plugin has 'is_xss_safe' set to FALSE, meaning content edited with CodeMirror should be properly filtered before output to prevent XSS attacks
- The text filter uses HTML::escape() to sanitize code content before rendering, preventing injection attacks in displayed code blocks
- The 'administer codemirror editor' permission has 'restrict access: true', indicating it should only be granted to trusted administrator roles
- Note: The JS Cookie module uses CDN by default and may have GDPR compliance implications - consider installing the js_cookie library locally for privacy-conscious deployments