在 VS Code HTML Emmet 中键入大括号答案

【问题标题】：Type a curly bracket in VS Code HTML Emmet在 VS Code HTML Emmet 中键入大括号
【发布时间】：2021-10-02 10:51:32
【问题描述】：

我正在尝试为使用大量 LaTex 的 HTML 文档编写 Emmet 缩写。我正在使用 VS 代码。有没有办法做到这一点？

Emmet（这是我需要帮助的）：

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

预期的 HTML 输出（| 代表我的光标）：

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

原来snippets.json 文件不接受大括号。我尝试使用反斜杠\{、引号'{' 和双括号{{ 进行转义。不好。

【问题讨论】：

只定义一个普通的sn-p
@rioV8，这就是我最终要做的。请参阅下面的答案

标签： html visual-studio-code emmet

【解决方案1】：

您可以在 VSCode 中为 HTML 创建自己的 sn-p。将其粘贴到 VS 内的 html.json sn-ps 中。您可以使用 ctrl+shift+p 或 cmd+shift+p 并搜索 Preferences: Configure User Snippets 然后选择 html.json

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

保存后，您现在可以像往常一样在 VScode 中的任何 .html 文件上键入数学并使用制表符

【讨论】：

这样就行了，谢谢！

【解决方案2】：

最好的方法是通过程序化方法。基本上，您使用 JavaScript 将数学元素 textContent 属性更改为保存在变量中的值

代码如下：

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

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

elem.textContent = math_str;

<math id='math'>

</math>

【讨论】：

但这在运行时有效，对吧？我在编辑时需要它