Liquid syntax highlighting for CodeMirror.

liquid-mode.js

/*
  This overlay provides a 'liquid' mode to the excellent CodeMirror editor (http://codemirror.net/).
  Add something like this to your CSS:

    .cm-liquid-tag {
      color: #32273f;
      background: #ead9ff;
    }
  
    .cm-liquid-variable {
      color: #29739b
      background: #c2e0f0;
    }

*/

CodeMirror.defineMode("liquid", function(config, parserConfig) {
  var liquidOverlay = {
    token: function(stream, state) {

      // Variables.
      if (stream.match("{{")) {
        while ((ch = stream.next()) != null)
          if (ch == "}" && stream.next() == "}") break;
        return "liquid-variable";
      }
      
      // Tags.
      if(stream.match("{%")) {
        while ((ch = stream.next()) != null)
          if (ch == "%" && stream.next() == "}") break;
        return "liquid-tag";
      }
      
      while (stream.next() != null && !stream.match("{{", false) && !stream.match("{%", false)) {}
      return null;
    }
  };
  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), liquidOverlay);
});

Nice

whats overlayParser? where it comes from?

There's a more complete liquid mode for CodeMirror here: https://github.com/axtro/codemirror_liquid_mode. It supports variables, arguments, operators, etc. It's written for pre-ES6 JavaScript, but it still works for us today.

To make this gist or the mode I linked work for newer CodeMirror (I think 3+), you have to replace CodeMirror.overlayParser with CodeMirror.overlayMode.