Type a curly bracket in VS Code HTML Emmet-CodePudding

I'm trying to write an Emmet abbreviation for an HTML document in which I'm using a lot of LaTex. I am using VS Code. Is there a way to do this?

Emmet (this is what I need help with):

"math" : "math>{$$\begin{align} \end{align}$$}"

Expected HTML output (the | represents my cursor):

<math>
    $$\begin{align}|\end{align}$$
</math>

Turns out the snippets.json file won't accept curly braces. I've tried escaping using the backslash \{, quotes '{', and double braces {{. No good.

CodePudding user response：

The best way to do this would be through a programmatic approach. Basically you use JavaScript to change the math elements textContent property to the value that is saved in a variable

Here is the code:

let math_str = '$$\begin{align}|\end{align}$$';

const elem = document.querySelector('#math');

elem.textContent = math_str;

<math id='math'>

</math>

CodePudding user response：

You can create your own snippet for HTML inside of VSCode. Paste this into html.json snippets inside of VS. You can use ctrl shift p or cmd shift p and search for Preferences: Configure User Snippets then select html.json

"Math Snippet": {
        "prefix": "math",
        "body": [
          "<math>",
          "    $$\\begin{align}${0}\\end{align}$$",
          "</math>"
        ],
        "description": "Custom HTML snippet for VSCode"
      }

Once you save, you can now type math and use tab like normal on any .html files in VScode