Highlight custom syntax: wordpress shortcodes in html



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 ?


‘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).


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


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!