codemirror.dart

Build Status

What is it?

A Dart wrapper around the CodeMirror text editor. From codemirror.net:

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.

An example

Map options = {
  'mode':  'javascript',
  'theme': 'monokai'
};

CodeMirror editor = new CodeMirror.fromElement(
    querySelector('#textContainer'), options: options);
editor.getDoc().setValue('foo.bar(1, 2, 3);');

How do I use it?

In your main html file, link to the style sheet:

<link href="packages/codemirror/codemirror.css" rel="stylesheet">

reference the CodeMirror JavaScript code:

<script src="packages/codemirror/codemirror.js"></script>

and, in your Dart code, import the library:

import 'package:codemirror/codemirror.dart';

Polymer transformer

The Polymer transfomer will inline our theme css references incorrectly. Currently, to use the codemirror package with Polymer, you'll need to add the following lines to your pubspec.yaml file.

- polymer:
    entry_points: web/foo_bar.html
    inline_stylesheets:
      packages/codemirror/codemirror.css: false

Libraries

codemirror