Custom highlight function doesn't handle ${VAR}

Here’s an example with a shell script its quite common to use ${VAR} syntax inside a bash/shell script e.g:

```bash
VAR="MY_VAR"
echo "${MY_VAR}"
```

It looks like this conflicts with MDsveX/Svelte template syntax and never loads for me. This also affects javascript code blocks. Maybe making a note in the docs would make sense in https://github.com/pngwn/MDsveX/issues/210.

@pngwn noted a workaround by using a custom escaping function:

const shiki = require("shiki");

const escape_svelty = (str) =>
  str
    .replace(
      /[{}`]/g,
      (c) => ({ "{": "{", "}": "}", "`": "`" }[c])
    )
    .replace(/\\([trn])/g, "\$1");

async function highlighter(code, lang) {
  const highlighter = await shiki.getHighlighter({ theme: "github-dark" });
  return escape_svelty(highlighter.codeToHtml(code, lang || "text"));
}

module.exports = {
  extensions: [".svx", ".md"],
  highlight: {
    highlighter: highlighter,
  },
};

_Originally posted by @michael0liver in https://github.com/pngwn/MDsveX/issues/205#issuecomment-803667947_

[pngwn]

Released in 0.9.1.

[pngwn]

I don’t think an escape boolean option will work because we don’t want to escape all of the code that is returned from the custom highlight function.

In this case:

const code = `<pre>${highlight(code)}</pre>`

We want to keep the pre tag intact and unescaped (we want them to be interpreted as HTML). I think the solution to this is to export a utility function that people can use to escape the svelte syntax.