CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.
Many other methods and addons…
The desktop versions of the following browsers, in standards mode (HTML5 recommended) are supported:
Modern mobile browsers tend to partly work. Bug reports and patches for mobile support are welcome, but the - maintainer does not have the time or budget to actually work on it himself.
The basic Codemirror Editor for Redux Framework is added like the other fields with this parameters:
'fields' => array(
array(
'id' => "codemirror",
'type' => "codemirror",
'title' => __("Code Editor CSS", 'redux-framework-demo'),
'compiler' => 'true',
'subtitle' => __('Dummy Subtitle', 'redux-framework-demo'),
'editor_options' => array(
"mode" => "css",
"addon" => array("foldcode-css","activeline"),
"theme" => "monokai",
"lint" => true,
"hint" => true,
"autohint" => true
)
),
.
.
.
(array) contains the options that defines the properties of the editor.
mode
option. If any linter is
available for this mode, it’ll add gutters nearby the line numbers and
tells you what’s wrong about your code.
mode
, the editor will show a
combobox filled with appropiate values for you. If the autohint
mode is set to false
,
the trigger of this autocomplete combobox is Ctrl+Space
.
Ctrl+Space
every time you want to autocomplete the code, just writing a few letters
would make you code faster.
This is a list of every mode in the distribution. Each mode lives in a subdirectory of the mode/ directory, and typically defines a single JavaScript file that implements the mode. Loading such file will make the language available to CodeMirror, through the mode option. This extension has the autoloading feature of those files, which searches for defined mode directory and autoloads neccessary files.
APL (mode:apl) |
Asterisk dialplan (mode:asterisk) |
C, C++, C# (mode:clike) |
Clojure (mode:clojure) |
COBOL (mode:cobol) |
CoffeeScript (mode:coffeescript) |
Common Lisp (mode:commonlisp) |
CSS (mode:css) |
Cython (mode:phyton) |
D (mode:d) |
diff (mode:diff) |
DTD (mode:dtd) |
ECL (mode:ecl) |
Eiffel (mode:eiffel) |
Erlang (mode:erlang) |
Fortran (mode:fortran) |
F# (mode:mllike) |
Gas (AT&T-style assembly) (mode:gas) |
Gherkin (mode:gherkin) |
Go (mode:go) |
Groovy (mode:groovy) |
HAML (mode:haml) |
Haskell (mode:haskell) |
Haxe (mode:haxe) |
HTTP (mode:http) |
Java (mode:clike) |
Jade (mode:jade) |
JavaScript (mode:javascript) |
Jinja2 (mode:jinja2) |
Julia (mode:julia) |
LESS (mode:less) |
LiveScript (mode:livescript) |
Markdown (GitHub-flavour) (mode:markdown) |
mIRC (mode:mirc) |
Nginx (mode:nginx) |
NTriples (mode:ntriples) |
OCaml (mode:mllike) |
Octave (MATLAB) (mode:octave) |
Pascal (mode:pascal) |
PEG.js (mode:pegjs) |
Perl (mode:perl) |
PHP (mode:php) |
Pig Latin (mode:pig) |
Properties files (mode:properties) |
Puppet (mode:puppet) |
Python (mode:phyton) |
Q (mode:q) |
R (mode:r) |
RPM spec and changelog (mode:rpm) |
reStructuredText (mode:rst) |
Ruby (mode:ruby) |
Rust (mode:rust) |
Sass (mode:sass) |
Scala (mode:clike) |
Scheme (mode:scheme) |
SCSS (mode:css) |
Shell (mode:shell) |
Sieve (mode:sieve) |
Smalltalk (mode:smalltalk) |
Smarty (mode:smarty) |
Smarty/HTML mixed (mode:smartymixed) |
Solr (mode:solr) |
SQL (several dialects) (mode:sql) |
SPARQL (mode:sparql) |
sTeX, LaTeX (mode:stex) |
Tcl (mode:tcl) |
Tiddlywiki (mode:tiddlywiki) |
Tiki wiki (mode:tiki) |
TOML (mode:toml) |
Turtle (mode:turtle) |
VB.NET (mode:vb) |
VBScript (mode:vbscript) |
Velocity (mode:velocity) |
Verilog (mode:verilog) |
XML/HTML (mode:xml) |
XQuery (mode:xquery) |
YAML (mode:yaml) |
Z80 (mode:z80) |
![]() 3024-day |
![]() 3024-night |
![]() ambiance |
![]() base16-dark |
![]() base16-light |
![]() blackboard |
![]() cobalt |
![]() eclipse |
![]() elegant |
![]() erlang-dark |
![]() lesser-dark |
![]() mbo |
![]() mdn-like |
![]() midnight |
![]() monokai |
![]() neat |
![]() night |
![]() paraiso-dark |
![]() paraiso-light |
Displays active line in different style.
Demo page for this addon in Codemirror Official
Site.
Auto closes []
,{}
,''
,""
brackets inside the editor
when typed.
Demo page for this addon in Codemirror
Official Site.
Auto closes xml tags if the editor has an xml compatible mode like HTML.
Demo page for this addon in Codemirror Official
Site.
If this add-on is active in the markdown
mode, when user presses the Enter
key
while typing a markdown list, the editor automatically indents the new line to the markdown definition
list’s left margin.
Demo page for this addon in Codemirror
Official Site.
Adds folding feature to gutter for multiline comments.
Adds folding feature to gutter for CSS brackets.
Adds folding feature to gutter for matched XML like tags.
Demo page for this addon in Codemirror Official
Site.
Adds folding feature to gutter for the lines that have the same indent level.
Adds folding feature to gutter curly brace matches in Javascript (and likes).
Demo page for this addon in Codemirror Official
Site.
Adds folding feature to gutter for markdown mode.
Demo page for this addon in Codemirror Official
Site.
Adds a fullscreen feature which will switch to fullscreen when F11
key is pressed inside the
editor.
Demo page for this addon in Codemirror Official
Site.
Adds a different styling to the selected text in the editor.
Demo page for this addon in Codemirror
Official Site.
Highlights the matching bracket couples mentioned in closebrackets
addon when clicked on one
of them inside the editor.
Highlights the same words as which the user selects in the editor.
Demo page for this addon in Codemirror
Official Site.
Highlights the same tags as the tag that user selected.
Demo page for this addon in Codemirror Official
Site.
if a placeholder
property is defined in the field’s property list (outside editor_options
array), this text will be shown in the editor as a placeholder text for the user.
Demo page for this addon in Codemirror
Official Site.
Displays an user-defined ruler on the editor. If you wonder how to define a ruler set, have a look at
addons/display/default-ruler.js
file, and feel free to modify that script to suit your
needs. Also the styling resides in addons/display/default-rulers.css
file.
Demo page for this addon in Codemirror Official
Site.
Adds a function to the key Ctrl+F
to show a dialog for searching the editor content.
Demo page for this addon in Codemirror Official
Site.
Styles the trailing spaces with the style defined in addons/edit/trailingspace.css
.
Demo page for this addon in Codemirror
Official Site.
CodeMirror is an open-source project shared under an MIT license. It is the editor used in the dev tools for both Firefox and Chrome, Light Table, Adobe Brackets, Bitbucket, and many other projects.
Development and bug tracking happens on github (alternate git repository). Please read these pointers before submitting a bug. Use pull requests to submit patches. All contributions must be released under the same MIT license that CodeMirror uses.
Discussion around the project is done on a mailing list. There is also the codemirror-announce list, which is only used for major announcements (such as new versions). If needed, you can contact the maintainer directly.
A list of CodeMirror-related software that is not part of the main distribution is maintained on our wiki. Feel free to add your project.