Codemirror how to create a mode

Question

So I just got into codemirror recently because I needed a text editor for my website, but that means I don't know much about the program. I got the editor working with the javascript mode, but I need to create some syntax for the editor, which I believe means I have to create a mode for the editor, and I am having trouble doing this. I have read over the manual a few times but something just isn't clicking for me, probably because I've never worked with something like this. Anyways right now I just need to get the hang of it, by creating simple add, subtract, and multiply functions. if someone could get me rolling with this I'd be very appreciative.

Answer 1

First of all, are you sure you need a new mode? Are you trying to support some custom DSL syntax that isn't already provided by one of the many built in modes?

The Manual has a good start on information for this. It mentions the simple case of using the simple mode addon for a declarative approach. It discusses the use of CodeMirror.defineMode to create a new mode and mentions the most important function for mode development token(stream, state):

a function that takes a character stream as input, advances it past a token, and returns a style for that token.

The manual also gives two example modes to look at. For a really simple mode it recommends diff and for a more complex mode clike. It is also worth just looking at the available modes in the mode directory to see if you can't just modify an existing mode to fit your needs.

Just for your reference I will include the diff mode inline below:

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE

(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {
"use strict";

CodeMirror.defineMode("diff", function() {

  var TOKEN_NAMES = {
    '+': 'positive',
    '-': 'negative',
    '@': 'meta'
  };

  return {
    token: function(stream) {
      var tw_pos = stream.string.search(/[\t ]+?$/);

      if (!stream.sol() || tw_pos === 0) {
        stream.skipToEnd();
        return ("error " + (
          TOKEN_NAMES[stream.string.charAt(0)] || '')).replace(/ $/, '');
      }

      var token_name = TOKEN_NAMES[stream.peek()] || stream.skipToEnd();

      if (tw_pos === -1) {
        stream.skipToEnd();
      } else {
        stream.pos = tw_pos;
      }

      return token_name;
    }
  };
});

CodeMirror.defineMIME("text/x-diff", "diff");

});

This is a very simple mode that doesn't even include any state information (and thus doesn't include the second param to the 'token' method).

I hope this helps.