Here is a start of a regex mode for CodeMirror inspired by [Regex Colorizer](http://stevenlevithan.com/regex/colorizer/)

codemirror-mode-regex.css

.cm-s-default span.cm-a{background: #aad1f7;}
.cm-s-default span.cm-b{background: #f9ca69;}
.cm-s-default span.cm-c{color: #007a09;}

.cm-s-default span.cm-g1{background: #d2f854;}
.cm-s-default span.cm-g2{background: #9ec70c;}
.cm-s-default span.cm-g3{background: #ecc9f7;}
.cm-s-default span.cm-g4{background: #54b70b;}
.cm-s-default span.cm-g5{background: #b688cf;}

.cm-s-default span.cm-err{background: #ff4300;}

codemirror-mode-regex.js

CodeMirror.defineMode("regex", function() {  
  var otherChar = /^[\^\$\.\+\?\*]/; 
  var g= 0;
  
  var tokenBase = function(stream) {
    var ch = stream.next();
    
    if (ch == "\\" && stream.match(/./, false)) {
      if (stream.match(/u\w{4}/)) return "a";
      if (stream.match(/u/)) return "err";
      
      if (stream.match(/x\w{2}/)) return "a";
      if (stream.match(/x/)) return "err";
      
      if (stream.match(/./)) return "a";
        
      return "a";
    }
    
    
    if (ch == "{"){
      if (stream.match(/(\d|\d,\d?)\}/))  return "a";
    }
    
    if (ch == "[" && stream.match(/[^\]]+\]/)){
      return "b";
    }      
    
    if (ch == "|") {
      return "g" + g;
    }      
    
    if (ch == "(") {
      stream.match(/[\?\!\:]+/);
      return "g" + (++g % 5);
    }      
    
    if (ch == ")") {
      if(g-1 < 0) return "err";
      return "g" + (g-- % 5);
    }      
    
    if (otherChar.test(ch)) {
      return "a";
    }
  };
  
  return {
    startState: function(base) {
      g= 0;
    },
    token: tokenBase
  };
});

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

Hi @douglasduteil, just letting you know we have used your code as a starting point for an interactive in our online Computer Science Field Guide text book (repo here). We have added attribution in the interactive's README file and within these files. Hopefully that's fine, let me know if you have any issues with it. Cheers, Jack.

Hi,

For those who are still interested in regular expression syntax highlighting for CodeMirror, I have started working on codemirror-mode-pcre

I believe it covers most PCRE features pretty well and next improvements should focus on the CodeMirror side (starting with anything necessary to nest that mode).

Highlighting:

• @douglasduteil for this very Gist
• @JackMorganNZ for his comment above
• @ioncodes @LuckyKobold @kitbs @apibrain as they starred this Gist