Skip to content

Instantly share code, notes, and snippets.

@douglasduteil
Last active June 13, 2021 00:43
Show Gist options
  • Save douglasduteil/5089187 to your computer and use it in GitHub Desktop.
Save douglasduteil/5089187 to your computer and use it in GitHub Desktop.
Here is a start of a regex mode for CodeMirror inspired by [Regex Colorizer](http://stevenlevithan.com/regex/colorizer/)
.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.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");
@JackMorganNZ
Copy link

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.

@xavierog
Copy link

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment