Add token to existing prismjs language

Question

I'm trying to add to prismjs's markup language, to add a new token as follows:

{something}
^\_______/^
|   |     `---punctuation
|   `---variable
`---punctuation

So that this code block ....

<div class="blah">
  {test} {sit_date_ran}
</div>

... would be highlighted as ...

... here's what I've tried ...

const lang = cloneDeep(languages.markup);

  lang.interpolation = {
    pattern: /^\{.+?\}$/,
    inside: {
      punctuation: /[\{\}]/,
      variable: /^\{(?:)\}$/,
    }
  };

Answer 1

The token pattern was just too greedy -- easy fix:

  lang.interpolation = {
    pattern: /\{.+?\}/,
    inside: {
      punctuation: /[\{\}]/g,
      variable: /\w+/,
    }
  };