CodeMirror is a code-editor component that can be embedded in
Web pages. It provides
only
the editor component, no
accompanying buttons
(see
CodeMirror
UI
for a drop-in button bar), auto-completion, or other IDE
functionality. It does provide a rich API on top of which such
functionality can be straightforwardly implemented.
CodeMirror works with language-specific modes. Modes are
JavaScript programs that help color (and optionally indent) text
written in a given language. The distribution comes with a few
modes (see the
mode/
directory), and it isn't hard
to
write new ones
for other languages.
Basic Usage
The easiest way to use CodeMirror is to simply load the script
and style sheet found under
lib/
in the distribution,
plus a mode script from one of the
mode/
directories
and a theme stylesheet from
theme/
. (See
also
the compression helper
.) For
example:
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="theme/default.css">
(If you use a theme other than
default.css
, you
also have to specify the
theme
option.) Having
done this, an editor instance can be created like this:
var myCodeMirror = CodeMirror(document.body);
The editor will be appended to the document body, will start
empty, and will use the mode that we loaded. To have more control
over the new editor, a configuration object can be passed
to
CodeMirror
as a second argument:
var myCodeMirror = CodeMirror(document.body, {
value: "function myScript(){return 100;}\n",
mode: "javascript"
This will initialize the editor with a piece of code already in
it, and explicitly tell it to use the JavaScript mode (which is
useful when multiple modes are loaded).
See below for a full discussion of the
configuration options that CodeMirror accepts.
In cases where you don't want to append the editor to an
element, and need more control over the way it is inserted, the
first argument to the CodeMirror
function can also
be a function that, when given a DOM element, inserts it into the
document somewhere. This could be used to, for example, replace a
textarea with a real editor:
var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});
However, for this use case, which is a common way to use
CodeMirror, the library provides a much more powerful
shortcut:
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
This will, among other things, ensure that the textarea's value
is updated when the form (if it is part of a form) is submitted.
See the API reference for a full
description of this method.
Configuration
Both the CodeMirror
function and
its fromTextArea
method take as second (optional)
argument an object containing configuration options. Any option
not supplied like this will be taken
from CodeMirror.defaults
, an object containing the
default options. You can update this object to change the defaults
on your page.
Options are not checked in any way, so setting bogus option
values is bound to lead to odd errors.
These are the supported options:
value (string)
The starting value of the editor.
mode (string or object)
The mode to use. When not given, this will default to the
first mode that was loaded. It may be a string, which either
simply names the mode or is
a MIME type
associated with the mode. Alternatively, it may be an object
containing configuration options for the mode, with
a name
property that names the mode (for
example {name: "javascript", json: true}
). The demo
pages for each mode contain information about what configuration
parameters the mode supports. You can ask CodeMirror which modes
and MIME types are loaded with
the CodeMirror.listModes
and CodeMirror.listMIMEs
functions.
theme (string)
The theme to style the editor with. You must make sure the
CSS file defining the corresponding .cm-s-[name]
styles is loaded (see
the theme
directory in the
distribution).
indentUnit (integer)
How many spaces a block (whatever that means in the edited
language) should be indented. The default is 2.
indentWithTabs (boolean)
Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.
tabMode (string)
Determines what happens when the user presses the tab key.
Must be one of the following:
"classic" (the default)
When nothing is selected, insert a tab. Otherwise,
behave like the "shift"
mode. (When shift is
held, this behaves like the "indent"
mode.)
"shift"
Indent all selected lines by
one indentUnit
.
If shift was held while pressing tab, un-indent all selected
lines one unit.
"indent"
Indent the line the 'correctly', based on its syntactic
context. Only works if the
mode supports it.
"default"
Do not capture tab presses, let the browser apply its
default behaviour (which usually means it skips to the next
control).
enterMode (string)
Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
"indent" (the default)
Use the mode's indentation rules to give the new line
the correct indentation.
"keep"
Indent the line the same as the previous line.
"flat"
Do not indent the new line.
electricChars (boolean)
Configures whether the editor should re-indent the current
line when a character is typed that might change its proper
indentation (only works if the mode supports indentation).
Default is true.
smartHome (boolean)
Configures whether the home key takes you to the first
non-whitespace character (unless already there) or to the start
of the line. On by default.
pollForIME (boolean)
When on (off by default), this will cause CodeMirror to poll
for input more agressively in an attempt to respond quickly to
IME (composed character) input.
lineWrapping (boolean)
Whether CodeMirror should scroll or wrap for long lines.
Defaults to false
(scroll).
lineNumbers (boolean)
Whether to show line numbers to the left of the editor.
firstLineNumber (integer)
At which number to start counting lines. Default is 1.
gutter (boolean)
Can be used to force a 'gutter' (empty space on the left of
the editor) to be shown even when no line numbers are active.
This is useful for setting markers.
fixedGutter (boolean)
When enabled (off by default), this will make the gutter
stay visible when the document is scrolled horizontally.
readOnly (boolean)
This disables editing of the editor content by the user.
(Changes through API functions will still be possible.) If you
also want to disable the cursor, use "nocursor"
as
a value for this option, instead of true
.
onChange (function)
When given, this function will be called every time the
content of the editor is changed. It will be given the editor
instance as only argument.
onCursorActivity (function)
Like onChange
, but will also be called when the
cursor moves without any changes being made.
onGutterClick (function)
When given, will be called whenever the editor gutter (the
line-number area) is clicked. Will be given the editor instance
as first argument, the (zero-based) number of the line that was
clicked as second argument, and the raw mousedown
event object as third argument.
onFocus, onBlur (function)
The given functions will be called whenever the editor is
focused or unfocused.
onScroll (function)
When given, will be called whenever the editor is
scrolled.
onHighlightComplete (function)
Whenever the editor's content has been fully highlighted,
this function (if given) will be called. It'll be given a single
argument, the editor instance.
matchBrackets (boolean)
Determines whether brackets are matched whenever the cursor
is moved next to a bracket.
workTime, workDelay (number)
Highlighting is done by a pseudo background-thread that will
work for workTime
milliseconds, and then use
timeout to sleep for workDelay
milliseconds. The
defaults are 200 and 300, you can change these options to make
the highlighting more or less aggressive.
undoDepth (integer)
The maximum number of undo levels that the editor stores.
Defaults to 40.
tabindex (integer)
The tab
index to assign to the editor. If not given, no tab index
will be assigned.
document (DOM document)
Use this if you want to display the editor in another DOM.
By default it will use the global document
object.
onKeyEvent (function)
This provides a rather low-level hook into CodeMirror's key
handling. If provided, this function will be called on
every keydown
, keyup
,
and keypress
event that CodeMirror captures. It
will be passed two arguments, the editor instance and the key
event. This key event is pretty much the raw key event, except
that a stop()
method is always added to it. You
could feed it to, for example, jQuery.Event
to
further normalize it.
This function can inspect the key
event, and handle it if it wants to. It may return true to tell
CodeMirror to ignore the event. Be wary that, on some browsers,
stopping a keydown
does not stop
the keypress
from firing, whereas on others it
does. If you respond to an event, you should probably inspect
its type
property and only do something when it
is keydown
(or keypress
for actions
that need character data).
Customized Styling
Up to a certain extent, CodeMirror's look can be changed by
modifying style sheet files. The style sheets supplied by modes
simply provide the colors for that mode, and can be adapted in a
very straightforward way. To style the editor itself, it is
possible to alter or override the styles defined
in codemirror.css
.
Some care must be taken there, since a lot of the rules in this
file are necessary to have CodeMirror function properly. Adjusting
colors should be safe, of course, and with some care a lot of
other things can be changed as well. The CSS classes defined in
this file serve the following roles:
CodeMirror
The outer element of the editor. This should be used for
borders and positioning. Can also be used to set styles that
should hold for everything inside the editor (such as font
and font size), or to set a background.
CodeMirror-scroll
This determines whether the editor scrolls (overflow:
auto
+ fixed height). By default, it does. Giving
this height: auto; overflow: visible;
will cause
the editor to resize to fit its content.
CodeMirror-focused
Whenever the editor is focused, the top element gets this
class. This is used to hide the cursor and give the selection a
different color when the editor is not focused.
CodeMirror-gutter
Use this for giving a background or a border to the editor
gutter. Don't set any padding here,
use CodeMirror-gutter-text
for that. By default,
the gutter is 'fluid', meaning it will adjust its width to the
maximum line number or line marker width. You can also set a
fixed width if you want.
CodeMirror-gutter-text
Used to style the actual line numbers. For the numbers to
line up, you must make sure that the font in the gutter is the
same as the one in the rest of the editor, so you should
probably only set font style and size in
the CodeMirror
class.
CodeMirror-lines
The visible lines. If this has vertical
padding, CodeMirror-gutter
should have the same
padding.
CodeMirror-cursor
The cursor is a block element that is absolutely positioned.
You can make it look whichever way you want.
CodeMirror-selected
The selection is represented by span
elements
with this class.
CodeMirror-matchingbracket
,
CodeMirror-nonmatchingbracket
These are used to style matched (or unmatched) brackets.
The actual lines, as well as the cursor, are represented
by pre
elements. By default no text styling (such as
bold) that might change line height is applied. If you do want
such effects, you'll have to give CodeMirror pre
a
fixed height. Also, you must still take care that character width
is constant.
If your page's style sheets do funky things to
all div
or pre
elements (you probably
shouldn't do that), you'll have to define rules to cancel these
effects out again for elements under the CodeMirror
class.
Programming API
A lot of CodeMirror features are only available through its API.
This has the disadvantage that you need to do work to enable them,
and the advantage that CodeMirror will fit seamlessly into your
application.
Whenever points in the document are represented, the API uses
objects with line
and ch
properties.
Both are zero-based. CodeMirror makes sure to 'clip' any positions
passed by client code so that they fit inside the document, so you
shouldn't worry too much about sanitizing your coordinates. If you
give ch
a value of null
, or don't
specify it, it will be replaced with the length of the specified
line.
getValue() → string
Get the current editor content.
setValue(string)
Set the editor content.
getSelection() → string
Get the currently selected code.
replaceSelection(string)
Replace the selection with the given string.
focus()
Give the editor focus.
setOption(option, value)
Change the configuration of the editor. option
should the name of an option,
and value
should be a valid value for that
option.
getOption(option) → value
Retrieves the current value of the given option for this
editor instance.
cursorCoords(start) → object
Returns an {x, y, yBot}
object containing the
coordinates of the cursor relative to the top-left corner of the
page. yBot
is the coordinate of the bottom of the
cursor. start
is a boolean indicating whether you
want the start or the end of the selection.
charCoords(pos) → object
Like cursorCoords
, but returns the position of
an arbitrary characters. pos
should be
a {line, ch}
object.
coordsChar(object) → pos
Given an {x, y}
object (in page coordinates),
returns the {line, ch}
position that corresponds to
undo()
Undo one edit (if any undo events are stored).
redo()
Redo one undone edit.
historySize() → object
Returns an object with {undo, redo}
properties,
both of which hold integers, indicating the amount of stored
undo and redo operations.
clearHistory()
Clears the editor's undo history.
indentLine(line, dir)
Reset the given line's indentation to the indentation
prescribed by the mode. If the second argument is given,
indentation will be increased (if dir
is true) or
decreased (if false) by an indent
unit instead.
getSearchCursor(query, start, caseFold) → cursor
Used to implement search/replace
functionality. query
can be a regular expression or
a string (only strings will match across lines—if they contain
newlines). start
provides the starting position of
the search. It can be a {line, ch}
object, or can
be left off to default to the start of the
document. caseFold
is only relevant when matching a
string. It will cause the search to be case-insensitive. A
search cursor has the following methods:
findNext(), findPrevious() → boolean
Search forward or backward from the current position.
The return value indicates whether a match was found. If
matching a regular expression, the return value will be the
array returned by the match
method, in case you
want to extract matched groups.
from(), to() → object
These are only valid when the last call
to findNext
or findPrevious
did
not return false. They will return {line, ch}
objects pointing at the start and end of the match.
replace(text)
Replaces the currently found match with the given text
and adjusts the cursor position to reflect the
replacement.
getTokenAt(pos) → object
Retrieves information about the token the current mode found
at the given position (a {line, ch}
object). The
returned object has the following properties:
start
The character (on the given line) at which the token starts.
end
The character at which the token ends.
string
The token's string.
className
The class the mode assigned
to the token. (Can be null when no class was assigned.)
state
The mode's state at the end of this token.
markText(from, to, className) → object
Can be used to mark a range of text with a specific CSS
class name. from
and to
should
be {line, ch}
objects. The method will return an
object with two methods, clear()
, which removes the
mark, and find()
, which returns a {from,
to}
(both document positions), indicating the current
position of the marked range.
setBookmark(pos) → object
Inserts a bookmark, a handle that follows the text around it
as it is being edited, at the given position. A bookmark has two
methods find()
and clear()
. The first
returns the current position of the bookmark, if it is still in
the document, and the second explicitly removes the
bookmark.
setMarker(line, text, className) → lineHandle
Add a gutter marker for the given line. Gutter markers are
shown in the line-number area (instead of the number for this
line). Both text
and className
are
optional. Setting text
to a Unicode character like
● tends to give a nice effect. To put a picture in the gutter,
set text
to a space and className
to
something that sets a background image. If you
specify text
, the given text (which may contain
HTML) will, by default, replace the line number for that line.
If this is not what you want, you can include the
string %N%
in the text, which will be replaced by
the line number.
clearMarker(line)
Clears a marker created
with setMarker
. line
can be either a
number or a handle returned by setMarker
(since a
number may now refer to a different line if something was added
or deleted).
setLineClass(line, className) → lineHandle
Set a CSS class name for the given line. line
can be a number or a line handle (as returned
by setMarker
or this function).
Pass null
to clear the class for a line.
hideLine(line) → lineHandle
Hide the given line (either by number or by handle). Hidden
lines don't show up in the editor, and their numbers are skipped
when line numbers are enabled.
Deleting a region around them does delete them, and coping a
region around will include them in the copied text.
showLine(line) → lineHandle
The inverse of hideLine
—re-shows a previously
hidden line, by number or by handle.
lineInfo(line) → object
Returns the line number, text content, and marker status of
the given line, which can be either a number or a handle
returned by setMarker
. The returned object has the
structure {line, handle, text, markerText, markerClass}
.
addWidget(pos, node, scrollIntoView)
Puts node
, which should be an absolutely
positioned DOM node, into the editor, positioned right below the
given {line, ch}
position.
When scrollIntoView
is true, the editor will ensure
that the entire node is visible (if possible). To remove the
widget again, simply use DOM methods (move it somewhere else, or
call removeChild
on its parent).
matchBrackets()
Force matching-bracket-highlighting to happen.
lineCount() → number
Get the number of lines in the editor.
getCursor(start) → object
start
is a boolean indicating whether the start
or the end of the selection must be retrieved. If it is not
given, the current cursor pos, i.e. the side of the selection
that would move if you pressed an arrow key, is chosen.
A {line, ch}
object will be returned.
somethingSelected() → boolean
Return true if any text is selected.
setCursor(pos)
Set the cursor position. You can either pass a
single {line, ch}
object, or the line and the
character as two separate parameters.
setSelection(start, end)
Set the selection range. start
and end
should be {line, ch}
objects.
getLine(n) → string
Get the content of line n
.
setLine(n, text)
Set the content of line n
.
removeLine(n)
Remove the given line from the document.
getRange(from, to) → string
Get the text between the given points in the editor, which
should be {line, ch}
objects.
replaceRange(string, from, to)
Replace the part of the document between from
and to
with the given string. from
and to
must be {line, ch}
objects. to
can be left off to simply insert the
string at position from
.
coordsFromIndex(index) → object
Calculates and returns a {line, ch}
object for a
zero-based index
who's value is relative to the start of the
editor's text. If the index
is out of range of the text then
the returned object is clipped to start or end of the text
respectively.
The following are more low-level methods:
operation(func) → result
CodeMirror internally buffers changes and only updates its
DOM structure after it has finished performing some operation.
If you need to perform a lot of operations on a CodeMirror
instance, you can call this method with a function argument. It
will call the function, buffering up all changes, and only doing
the expensive update after the function returns. This can be a
lot faster. The return value from this method will be the return
value of your function.
refresh()
If your code does something to change the size of the editor
element (window resizes are already listened for), or unhides
it, you should probably follow up by calling this method to
ensure CodeMirror is still looking as intended.
getInputField() → textarea
Returns the hiden textarea used to read input.
getWrapperElement() → node
Returns the DOM node that represents the editor. Remove this
from your tree to delete an editor instance.
getScrollerElement() → node
Returns the DOM node that is responsible for the sizing and
the scrolling of the editor. You can change
the height
and width
styles of this
element to resize an editor. (You might have to call
the refresh
method
afterwards.)
getGutterElement() → node
Fetches the DOM node that represents the editor gutter.
getStateAfter(line) → state
Returns the mode's parser state, if any, at the end of the
given line number. If no line number is given, the state at the
end of the document is returned. This can be useful for storing
parsing errors in the state, or getting other kinds of
contextual information for a line.
Finally, the CodeMirror
object
itself has a method fromTextArea
. This takes a
textarea DOM node as first argument and an optional configuration
object as second. It will replace the textarea with a CodeMirror
instance, and wire up the form of that textarea (if any) to make
sure the editor contents are put into the textarea when the form
is submitted. A CodeMirror instance created this way has two
additional methods:
save()
Copy the content of the editor into the textarea.
toTextArea()
Remove the editor, and restore the original textarea (with
the editor's current content).
If you want to define extra methods in terms
of the CodeMirror API, it is possible to
use CodeMirror.defineExtension(name, value)
. This
will cause the given value (usually a method) to be added to all
CodeMirror instances created from then on.
Writing CodeMirror Modes
Modes typically consist of a JavaScript file and a CSS file.
The CSS file (see, for
example javascript.css
)
defines the classes that will be used to style the syntactic
elements of the code, and the script contains the logic to
actually assign these classes to the right pieces of text.
You'll usually want to use some kind of prefix for your CSS
classes, so that they are unlikely to clash with other classes,
both those used by other modes and those defined by the page in
which CodeMirror is embedded.
The mode script should
call CodeMirror.defineMode
to register itself with
CodeMirror. This function takes two arguments. The first should be
the name of the mode, for which you should use a lowercase string,
preferably one that is also the name of the files that define the
mode (i.e. "xml"
is defined xml.js
). The
second argument should be a function that, given a CodeMirror
configuration object (the thing passed to
the CodeMirror
function) and a mode configuration
object (as in the mode
option), returns a mode object.
Typically, you should use this second argument
to defineMode
as your module scope function (modes
should not leak anything into the global scope!), i.e. write your
whole mode inside this function.
The main responsibility of a mode script is parsing
the content of the editor. Depending on the language and the
amount of functionality desired, this can be done in really easy
or extremely complicated ways. Some parsers can be stateless,
meaning that they look at one element (token) of the code
at a time, with no memory of what came before. Most, however, will
need to remember something. This is done by using a state
object, which is an object that can be mutated every time a
new token is read.
Modes that use a state must define
a startState
method on their mode object. This is a
function of no arguments that produces a state object to be used
at the start of a document.
The most important part of a mode object is
its token(stream, state)
method. All modes must
define this method. It should read one token from the stream it is
given as an argument, optionally update its state, and return a
style string, or null
for tokens that do not have to
be styled. For your styles, you can either use the 'standard' ones
defined in the themes (without the cm-
prefix), or
define your own (as the diff
mode does) and have people include a custom theme for your
mode.
The stream object encapsulates a line of code
(tokens may never span lines) and our current position in that
line. It has the following API:
eol() → boolean
Returns true only if the stream is at the end of the
line.
sol() → boolean
Returns true only if the stream is at the start of the
line.
peek() → character
Returns the next character in the stream without advancing
it. Will return undefined
at the end of the
line.
next() → character
Returns the next character in the stream and advances it.
Also returns undefined
when no more characters are
available.
eat(match) → character
match
can be a character, a regular expression,
or a function that takes a character and returns a boolean. If
the next character in the stream 'matches' the given argument,
it is consumed and returned. Otherwise, undefined
is returned.
eatWhile(match) → boolean
Repeatedly calls eat
with the given argument,
until it fails. Returns true if any characters were eaten.
eatSpace() → boolean
Shortcut for eatWhile
when matching
white-space.
skipToEnd()
Moves the position to the end of the line.
skipTo(ch) → boolean
Skips to the next occurrence of the given character, if
found on the current line (doesn't advance the stream if the
character does not occur on the line). Returns true if the
character was found.
match(pattern, consume, caseFold) → boolean
Act like a
multi-character eat
—if consume
is true
or not given—or a look-ahead that doesn't update the stream
position—if it is false. pattern
can be either a
string or a regular expression starting with ^
.
When it is a string, caseFold
can be set to true to
make the match case-insensitive. When successfully matching a
regular expression, the returned value will be the array
returned by match
, in case you need to extract
matched groups.
backUp(n)
Backs up the stream n
characters. Backing it up
further than the start of the current token will cause things to
break, so be careful.
column() → integer
Returns the column (taking into account tabs) at which the
current token starts. Can be used to find out whether a token
starts a new line.
indentation() → integer
Tells you how far the current line has been indented, in
spaces. Corrects for tab characters.
current() → string
Get the string between the start of the current token and
the current stream position.
By default, blank lines are simply skipped when
tokenizing a document. For languages that have significant blank
lines, you can define a blankLine(state)
method on
your mode that will get called whenever a blank line is passed
over, so that it can update the parser state.
Because state object are mutated, and CodeMirror
needs to keep valid versions of a state around so that it can
restart a parse at any line, copies must be made of state objects.
The default algorithm used is that a new state object is created,
which gets all the properties of the old object. Any properties
which hold arrays get a copy of these arrays (since arrays tend to
be used as mutable stacks). When this is not correct, for example
because a mode mutates non-array properties of its state object, a
mode object should define a copyState
method,
which is given a state and should return a safe copy of that
state.
By default, CodeMirror will stop re-parsing
a document as soon as it encounters a few lines that were
highlighted the same in the old parse as in the new one. It is
possible to provide an explicit way to test whether a state is
equivalent to another one, which CodeMirror will use (instead of
the unchanged-lines heuristic) to decide when to stop
highlighting. You do this by providing
a compareStates
method on your mode object, which
takes two state arguments and returns a boolean indicating whether
they are equivalent. See the XML mode, which uses this to provide
reliable highlighting of bad closing tags, as an example.
If you want your mode to provide smart indentation
(see entermode
and tabMode
when they
have a value of "indent"
), you must define
an indent(state, textAfter)
method on your mode
object.
The indentation method should inspect the given state object,
and optionally the textAfter
string, which contains
the text on the line that is being indented, and return an
integer, the amount of spaces to indent. It should usually take
the indentUnit
option into account.
Finally, a mode may define
an electricChars
property, which should hold a string
containing all the characters that should trigger the behaviour
described for
the electricChars
option.
So, to summarize, a mode must provide
a token
method, and it may
provide startState
, copyState
,
and indent
methods. For an example of a trivial mode,
see the diff mode, for a more
involved example, see
the JavaScript
mode.
Sometimes, it is useful for modes to nest—to have one
mode delegate work to another mode. An example of this kind of
mode is the mixed-mode HTML
mode. To implement such nesting, it is usually necessary to
create mode objects and copy states yourself. To create a mode
object, there are CodeMirror.getMode(options,
parserConfig)
, where the first argument is a configuration
object as passed to the mode constructor function, and the second
argument is a mode specification as in
the mode
option. To copy a
state object, call CodeMirror.copyState(mode, state)
,
where mode
is the mode that created the given
state.
To make indentation work properly in a nested parser, it is
advisable to give the startState
method of modes that
are intended to be nested an optional argument that provides the
base indentation for the block of code. The JavaScript and CSS
parser do this, for example, to allow JavaScript and CSS code
inside the mixed-mode HTML mode to be properly indented.
Finally, it is possible to associate your mode, or a certain
configuration of your mode, with
a MIME type. For
example, the JavaScript mode associates itself
with text/javascript
, and its JSON variant
with application/json
. To do this,
call CodeMirror.defineMIME(mime, modeSpec)
,
where modeSpec
can be a string or object specifying a
mode, as in the mode
option.
Contents
Overview
Basic Usage
Configuration
Customized Styling
Programming API
Writing CodeMirror Modes