CodeMirror Field
This module integrates the CodeMirror editor as a field type, allowing you to add customizable code snippet fields to entities with syntax highlighting and autocomplete. It supports multiple programming languages and offers extensive configuration options for each field.
CodeMirror Field is a module that integrates the CodeMirror editor as an attachable field. You can find more information about CodeMirror at http://codemirror.net/.
Main features
- It allows you to attach code snippet fields to entities, providing a customizable field widget and formatter.
- You'll also benefit from autocomplete functionality for the supported modes.
Available options
- The widget currently supports four modes: text/html, css, less, and javascript. However, it's easily extendable to other languages supported by CodeMirror.
- Each field instance can have its own unique syntax highlighting theme.
- For more detailed options, please refer to the official CodeMirror documentation at http://codemirror.net/doc/manual.html. You'll find information about options such as indent unit, smart indent, indent with tabs, electric characters, auto clear empty lines, line wrapping, line numbers, gutter, fixed gutter, show cursor when selecting, read only, cursor blink rate, undo depth, auto focus, and drag and drop.
Installation instructions and dependencies for Drupal 7 and Drupal 8+
Drupal 7
Dependencies:
CodeMirror library (https://github.com/marijnh/CodeMirror)
Libraries module (https://www.drupal.org/project/libraries)
Installation
1. Download the CodeMirror library from GitHub and place it in the sites/all/libraries directory. Make sure the library is cloned as codemirror or rename the directory accordingly.
2. Download and enable the Libraries module.
3. Enable the CodeMirror Field module.
Drupal 8+
Installation:
1. Extend your composer.json file with the following code:
"repositories": [{
"type": "package",
"package": {
"name": "codemirror/codemirror5",
"type": "drupal-library",
"version": "5",
"dist": {
"url": "https://codemirror.net/5/codemirror.zip",
"type": "zip"
}
}
}]
2. Require the library with composer: composer require codemirror/codemirror5
3. Enable the CodeMirror Field module.
Similar Projects
If you're interested in CodeMirror-based editors, you can check out the CodeMirror editor module. It also provides a field widget and a formatter for code snippets.
Another project worth exploring is Wysiwyg CodeMagic, which has a different concept. It works with WYSIWYG and requires TinyMCE.
Feel free to explore these options and find the one that best suits your needs.