在 VSCODE 中的自定义标签之间自定义代码

Question

我想创建自定义标签只是为了更好的视觉体验。

像php一样，如果我们使用评论标签，

/*
    comment 1
    comment 2
    comment 3
*/

它改变了颜色编码。

同样我想创建一个像

这样的标签

// log start
    executable code here... 
    but should look like comment or blur
// log end

我知道这很奇怪，但如果 vscode 设置中有任何内容或任何自定义插件或任何扩展都会有所帮助

Answer 1

您可以使用 Highlight 扩展来实现这一点。您可以设置自定义正则表达式并将特定样式应用于与这些正则表达式匹配的代码。

安装扩展，将其添加为自定义正则表达式：

"(// log start(.|\n)+?// log end)": {
      "decorations": [
        {
          "overviewRulerColor": "#ffcc00",
          "backgroundColor": "#ffcc00",
          "color": "#1f1f1f",
          "fontWeight": "bold"
        }
      ]
    }

显然，将颜色替换为您想要的颜色。这是我的设置的样子：

Answer 2

试试这个（取决于你的颜色：

"highlight.regexes": {
  "([ \t]*// log start)([\S\s]+?)([ \t]*// log end)": {
    "decorations": [
      {
        "backgroundColor": "#fff9",
        "color": "#0006",
        "letterSpacing": "4px",
         "after" : {
          "fontWeight": "bold",
          "contentText": "\u2003\u2003\u2003\u2003\u2003\u274d",
          "color": "black"
        }
      },
      {
        "color": "#0006",
        "fontWeight": "bold"
      },
      {
        "backgroundColor": "#fff9",
        "color": "#0006",
        "letterSpacing": "4px",
      }
    ]
  }
}

这里的部分是单独捕获的，所以你可以用它们做不同的事情：

在 VSCODE 中的自定义标签之间自定义代码

Customize code between custom tags in VSCODE

visual-studio-code

vscode-settings