Examples

Here you can find descriptions, usually with code included, that go through the recommended way to do various things with the library.

Basics

• Basic Editor

  Setting up a simple CodeMirror editor.

• Bundling with Rollup

  How to create a script file that you can load in the browser.

• Configuration

  Shows how to configure your editor and dynamically change its configuration.

• Styling

  How to style your editor or extension, and how to create a new editor theme.

• Handling Tab

  If you're confused or annoyed that the editor doesn't handle Tab by default, read this.

• Huge Document

  This demo creates an editor with a document of several million lines, just because we can.

• Internet Explorer 11

  Setting up your editor so that it loads in Internet Explorer.

Language

• Writing a Language Package

  Adding support for a new language to CodeMirror.

• Mixed-Language Parsing

  Setting up language support for documents that contain multiple languages.

Programming Interface

• Selection Handling

  How to use and change the editor selection.

• Document Changes

  How to write code that changes the editor document.

• Decoration

  Adding decorations to influence the way the editor content is drawn.

• Right-to-left text

  Properly handling right-to-left and bidirectional text.

• Undoable Effects

  Integrating editor state beyond the document with the undo history.

• Split View

  How to set up two editor views looking at the same document.

• Extension: Zebra Stripes

  Constructing an extension that styles alternating lines.

Integration

• Internationalization

  Explains how the library handles UI text, and translates the editor into German.

• Autocompletion

  Providing hints for possible input in the editor.

• Gutter

  Defining and configuring editor gutters.

• Editor Panels

  Explains how to display UI panels above and below an editor.

• Displaying Tooltips

  Shows how to use the tooltip extension to display a cursor tracker and a hover tooltip.

• Read-Only Editor

  Create an editor configuration that doesn't allow the user to modify the document.

• Linting

  Define a function that finds problems in the content, and show those problems in the editor.

• Collaborative Editing

  Setting up a collaborative editing system with CodeMirror.