Highlight custom syntax: wordpress shortcodes in html

1

Hello

I have been playing around with htmlmixed mode to try to get the following syntax ro highlight,

<label> Your name [text* your-name] </label>

I am trying to highlight [text* your-name]

Here is what I experimented with,

var mixedMode = {
    name: "htmlmixed",
    tags: {
      custom: [[null,/^\[([a-zA-Z0-9_]+)\*?(.*)\]$/ , "wpShortcode"]]
      }
    }
var myCodeMirror = CodeMirror( $('#cf7-codemirror').get(0) , {
  mode:  mixedMode,
});

The CodeMirror editor loads without any errors, but the above code [text* your-name] is still styled as cm-m-xml, is the default xml styling. How can I get it to be styled with say the class cm-m-shortcode ?

2

‘Tag’, in this context, means HTML tag, not any arbitrary syntax. The htmlmixed mode won’t help you with this (but a custom overlay mode on top of it might).

3

oh, ok thanks. I will explore further and see if I can get it to work. Thank you for your reply.

4

Got it to work!!! I am posting my solution here in case it helps someone else. I used one of the examples provided in the download kit,

CodeMirror.defineMode("shortcode", function(config, parserConfig) {
    var cf7Overlay = {
      token: function(stream, state) {
        var ch;
        if (stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/)) {
          while ((ch = stream.next()) != null)
            if (ch == "]" ) {
              return "shortcode";
            }
        }
        while (stream.next() != null && !stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/, false)) {}
        return null;
      }
    };
    return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "htmlmixed"), cf7Overlay);
  });
var myCodeMirror = CodeMirror( $('#cf7-codemirror').get(0) , {
  mode:  "shortcode"
});

PS: Marijn, thanks for a beautiful plugin!

5

Hi @aurovrata - I hope this finds you well.

Somehow in google you are the only one popping up when searching for how to highlight shortcodes with CM :smiley:
I signed up here just to say this:

I wanted to say thanks for bringing me on the right path.
I think you might find this helpful:

I did not create that on my own - it is freely inspired on a very cool plugin I used to use.
However I thought to share it as it handles ShortCode highlighting very, very well (inclusive nesting, quoting and whatnot)

Thanks again for the hints above because they helped a great deal to understand how CodeMirror even works in the core.