Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating new modes for CodeMirror

I want to highlight only keywords that look like this: {KEYWORD} (basically UPPERCASE words wrapped between single {} parentheses)

I tried this by copying the code from the Mustache Overlay demo, and by replacing the double brackets with single ones:

CodeMirror.defineMode('mymode', function(config, parserConfig) {
  var mymodeOverlay = {
    token: function(stream, state) {
      if (stream.match("{")) {
        while ((ch = stream.next()) != null)
          if (ch == "}" && stream.next() == "}") break;
        return 'mymode';
      }
      while (stream.next() != null && !stream.match("{", false)) {}
      return null;
    }
  };
  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mymodeOverlay);
});

but it doesn't work very good :)

Any ideas?

like image 949
Alex Avatar asked Jun 15 '11 21:06

Alex


People also ask

How do I reset CodeMirror editor?

If you don't want to kill the CodeMirror instance, just change the entire document holding the text, data on markers etc. This can be done by calling cm. swapDoc(doc: CodeMirror. Doc) .

Does GitHub use CodeMirror?

CodeMirror is open source under a permissive license (MIT). It is being developed on GitHub. Contributions are welcome.

What is gutter in CodeMirror?

The view module provides functionality for adding gutters (vertical bars in front of the code) to your editor. The simplest use of gutters is to simply dump lineNumbers() into your configuration to get a line number gutter.


2 Answers

There is special handling in the Mustache example because it needs to handle 2-character delimiters (e.g. there are two characters in '{{' and '}}'). I've never used CodeMirror before, so this is just a guess, but try something like this:

CodeMirror.defineMode("mymode", function(config, parserConfig) {
  var mymodeOverlay = {
    token: function(stream, state) {
      if (stream.match("{")) {
        while ((ch = stream.next()) != null)
          if (ch == "}") break;
        return "mymode";
      }
      while (stream.next() != null && !stream.match("{", false)) {}
      return null;
    }
  };
  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mymodeOverlay);
});

Edit

it works (though it highlights words with lowercase letters too)

This should work:

token: function(stream, state) {
  if (stream.match("{")) {
    while ((ch = stream.next()) != null && ch === ch.toUpperCase())
      if (ch == "}") break;
    return "mymode";
  }
  while (stream.next() != null && !stream.match("{", false)) {}
  return null;
}
like image 185
Matt Ball Avatar answered Sep 20 '22 14:09

Matt Ball


Accepted answer highlight every chars in brackets.

enter image description here

My version, if someone else encounter same issue.

enter image description here

CodeMirror.defineMode('mymode', function (config, parserConfig) {
    return {
        /**
         * @param {CodeMirror.StringStream} stream
         */
        token: function (stream) {
            // check for {
            if (stream.match('{')) {
                // trying to find }

                // if not a char
                if (!stream.eatWhile(/[\w]/)) {
                    return null;
                }

                if (stream.match('}')) {
                    return 'mymode';
                }
            }

            while (stream.next() && !stream.match('{', false)) {}

            return null;
        }
    };
});
like image 3
Alexey B. Avatar answered Sep 22 '22 14:09

Alexey B.