Press ctrl-space to activate autocompletion. The
-completion uses
-the anyword-hint.js
-module, which simply looks at nearby words in the buffer and completes
-to those.
Demonstration of
- using linked documents
- to provide a split view on a document, and
- using swapDoc
- to use a single editor to display multiple documents.
On changes to the content of the above editor, a (crude) script
-tries to auto-detect the language used, and switches the editor to
-either JavaScript or Scheme mode based on that.
The emacs keybindings are enabled by
-including keymap/emacs.js and setting
-the keyMap option to "emacs". Because
-CodeMirror's internal API is quite different from Emacs, they are only
-a loose approximation of actual emacs bindings, though.
-
-
Also note that a lot of browsers disallow certain keys from being
-captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the
-result that idiomatic use of Emacs keys will constantly close your tab
-or open a new window.
Demonstration of
- the fullscreen
- addon. Press F11 when cursor is in the editor to
- toggle full screen editing. Esc can also be used
- to exit full screen editing.
Demonstration of
-the hardwrap addon.
-The above editor has its change event hooked up to
-the wrapParagraphsInRange method, so that the paragraphs
-are reflown as you are typing.
The merge
-addon provides an interface for displaying and merging diffs,
-either two-way
-or three-way.
-The left (or center) pane is editable, and the differences with the
-other pane(s) are optionally shown live as you edit
-it. In the two-way configuration, there are also options to pad changed
-sections to align them, and to collapse unchanged
-stretches of text.
Demonstration of a multiplexing mode, which, at certain
- boundary strings, switches to one or more inner modes. The out
- (HTML) mode does not get fed the content of the <<
- >> blocks. See
- the manual and
- the source for more
- information.
Demonstration of a mode that parses HTML, highlighting
- the Mustache templating
- directives inside of it by using the code
- in overlay.js. View
- source to see the 15 lines of code needed to accomplish this.
The placeholder
- plug-in adds an option placeholder that can be set to
- make text appear in the editor when it is empty and not focused.
- If the source textarea has a placeholder attribute,
- it will automatically be inherited.
This demo does the same thing as
- the HTML5 completion demo, but
- loads its dependencies
- with Require.js, rather than
- explicitly. Press ctrl-space to activate
- completion.
By setting an editor's height style
-to auto and giving
-the viewportMargin
-a value of Infinity, CodeMirror can be made to
-automatically resize to fit its content.
If this is a function, it will be called for each token with
- two arguments, the token's text and the token's style class (may
- be null for unstyled tokens). If it is a DOM node,
- the tokens will be converted to span elements as in
- an editor, and inserted into the node
- (through innerHTML).
The mode/simple
-addon allows CodeMirror modes to be specified using a relatively simple
-declarative format. This format is not as powerful as writing code
-directly against the mode
-interface, but is a lot easier to get started with, and
-sufficiently expressive for many simple language modes.
-
-
This interface is still in flux. It is unlikely to be scrapped or
-overhauled completely, so do start writing code against it, but
-details might change as it stabilizes, and you might have to tweak
-your code when upgrading.
-
-
Simple modes (loosely based on
-the Common
-JavaScript Syntax Highlighting Specification, which never took
-off), are state machines, where each state has a number of rules that
-match tokens. A rule describes a type of token that may occur in the
-current state, and possibly a transition to another state caused by
-that token.
-
-
The CodeMirror.defineSimpleMode(name, states) method
-takes a mode name and an object that describes the mode's states. The
-editor below shows an example of such a mode (and is itself
-highlighted by the mode shown in it).
-
-
-
-
Each state is an array of rules. A rule may have the following properties:
-
-
-
regex: string | RegExp
-
The regular expression that matches the token. May be a string
- or a regex object. When a regex, the ignoreCase flag
- will be taken into account when matching the token. This regex
- should only capture groups when the token property is
- an array.
-
token: string | null
-
An optional token style. Multiple styles can be specified by
- separating them with dots or spaces. When the regex for
- this rule captures groups, it must capture all of the
- string (since JS provides no way to find out where a group matched),
- and this property must hold an array of token styles that has one
- style for each matched group.
-
next: string
-
When a next property is present, the mode will
- transfer to the state named by the property when the token is
- encountered.
-
push: string
-
Like next, but instead replacing the current state
- by the new state, the current state is kept on a stack, and can be
- returned to with the pop directive.
-
pop: bool
-
When true, and there is another state on the state stack, will
- cause the mode to pop that state off the stack and transition to
- it.
-
mode: {spec, end, persistent}
-
Can be used to embed another mode inside a mode. When present,
- must hold an object with a spec property that describes
- the embedded mode, and an optional end end property
- that specifies the regexp that will end the extent of the mode. When
- a persistent property is set (and true), the nested
- mode's state will be preserved between occurrences of the mode.
-
indent: bool
-
When true, this token changes the indentation to be one unit
- more than the current line's indentation.
-
dedent: bool
-
When true, this token will pop one scope off the indentation
- stack.
-
dedentIfLineStart: bool
-
If a token has its dedent property set, it will, by
- default, cause lines where it appears at the start to be dedented.
- Set this property to false to prevent that behavior.
-
-
-
The meta property of the states object is special, and
-will not be interpreted as a state. Instead, properties set on it will
-be set on the mode, which is useful for properties
-like lineComment,
-which sets the comment style for a mode. The simple mode addon also
-recognizes a few such properties:
-
-
-
dontIndentStates: array<string>
-
An array of states in which the mode's auto-indentation should
- not take effect. Usually used for multi-line comment and string
- states.
The simplescrollbars addon defines two
-styles of non-native scrollbars: "simple" and "overlay" (click to try), which can be passed to
-the scrollbarStyle option. These implement
-the scrollbar using DOM elements, allowing more control over
-its appearance.
Automatically derive odd wrapping behavior for your browser
-
-
-
This is a hack to automatically derive
- a spanAffectsWrapping regexp for a browser. See the
- comments above that variable
- in lib/codemirror.js
- for some more details.
The vim keybindings are enabled by
-including keymap/vim.js and setting
-the vimMode option to true. This will also
-automatically change the keyMap option to "vim".
-
-
Features
-
-
-
All common motions and operators, including text objects
-
Operator motion orthogonality
-
Visual mode - characterwise, linewise, partial support for blockwise
Note that while the vim mode tries to emulate the most useful features of
-vim as faithfully as possible, it does not strive to become a complete vim
-implementation
This demo runs JSHint over the code
-in the editor (which is the script used on this page), and
-inserts line widgets to
-display the warnings that JSHint comes up with.
Press ctrl-space, or type a '<' character to
- activate autocompletion. This demo defines a simple schema that
- guides completion. The schema can be customized—see
- the manual.
-
-
Development of the xml-hint addon was kindly
- sponsored
- by www.xperiment.mobi.
-
-
-