Is it possible to mix both the CodeMirror: Velocity mode and the CodeMirror: HTML mixed mode?

Question

Does anyone have made a 'htmlmixed' + 'Velocity' mode for codemirror? Or anyone can advice how to achieve that?

Answer 1

I was able to achieve this easily with the overlay.js addon:

CodeMirror.defineMode("velocityOverlay", function(config, parserConfig) {
  return CodeMirror.overlayMode(CodeMirror.getMode(config, "htmlmixed"), CodeMirror.getMode(config, "velocity"));
});

Then in the editor set the mode option to be "velocityOverlay" and you are done.

However, the velocity mode highlights characters like <,>, etc as velocity operators which you may not want as it will make your html higlighting look ugly. To deal with this I changed the following line of code in velocity.js:

var isOperatorChar = /[+\-*&%=<>!?:\/|]/;

to

var isOperatorChar = /[+\*&%=?:|]/;

Answer 2

You might be able to get somewhere using the mode-multiplexer, if there are specific strings that you want to use to switch mode on. But it looks like Velocity would require something more advanced. So you'd have to write your own super-mode, similar to what the htmlmixed mode does, which intelligently switches between modes.