Greetings,
I have been trying to enable tag matching using this example with custom overlay mode on htmlmixed
and usnig matchTags: {bothTags: true}
in the editor initialisation settings, however I am not able to get it to work with my custom mode,
const cmInitialSettings = {
value:"",matchTags: {bothTags: true}, autoCloseTags:true,
extraKeys: {"Ctrl-Space": "autocomplete", "Ctrl-/": "toggleComment", "Ctrl-J": "toMatchingTag"},
lineNumbers: true, styleActiveLine: true,
matchBrackets: true, tabSize:2, lineWrapping: true, addModeClass: true,
foldGutter: true, autofocus:false,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}
const cme = CodeMirror(document.getElementById("cf7-codemirror"),cmInitialSettings);
CodeMirror.defineMode("shortcode", function(config, parserConfig) {
let scOverlay = {
token: function(stream, state) {
let ch;
if (stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/)) {
while ((ch = stream.next()) != null){
if (ch == "]" ) {
//stream.eat("]");
return "shortcode";
}
}
}else if(stream.match(/data-([a-z0-9_]+)/)){
while ((ch = stream.next()) != null){
if (ch == '=' ) {
//stream.eat("]");
return "cf7sg-attr";
}
}
}
while (stream.next() != null && !stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/, false) && !stream.match(/data-([a-z0-9_]+)/,false) ) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "htmlmixed"), scOverlay);
});
cme.setOption('mode','shortcode');
Any idea how I can get the tags to match/highlight?