XML 包含 javascript 的 VS Code 语法突出显示

Question

编辑 - 解决方案：

我从@Tomalak 解决方案中获得了一些灵感。但是，我没有使用 XSLT，而是使用 VS Code 替换正则表达式来注释掉我的 XML 代码：

<!-- comment out xml tags : ^(\s*(\]\]>)?<\/?\w*>(<!\[CDATA\[)?)\s*$ --> 
<!-- comment out xml tags : // --> 
<!-- uncomment xml tags   : ^\/\/(\s*(\]\]>)?<\/?\w*>(<!\[CDATA\[)?)\s*$ --> 
<!-- uncomment xml tags   :  -->

使用</code> 将为您提供捕获组。我只是捕获所有 XML 标签并添加 <code>// 个字符以使其成为评论。

从那里我只是将文件的语法突出显示设置为 JavaScript 并且一切正常。

我只需要偶尔这样做一次，所以这个快速破解对我来说很合适。然而，更复杂的解决方案（如 XSLT 模板）可能更适合更活跃的项目。

问题

我有一个包含 javascript 的 XML 文件（由于我们使用的平台的限制。）我的代码如下所示：

<JS>
  <MY_FUNCTION><![CDATA[
// comment here
let my_function = () => console.log("Hello World");
  ]]></MY_FUNCTION>
  <LESS_THAN><![CDATA[
let less_than = (a,b) => a < b;
  ]]></LESS_THAN>
  <GREATER_THAN><![CDATA[
let greater_than = (a,b) => a > b;
  ]]></GREATER_THAN>
</JS>

因为我的文件是 XML 我没有得到 javascript 的语法高亮显示。所以我的代码只是灰色的，类似于评论的样子。

是否有可以突出显示我的代码的扩展程序？如果对我有帮助，我也愿意修改突出显示规则。

Answer 1

你可以扭转这个问题。此 XSLT 模板将您的 XML 转换为 JS 代码

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="text" />

    <xsl:template match="*[normalize-space(text()[1])]">
        <xsl:value-of select="concat('//xml:&lt;', name(), '&gt;&lt;![CDATA[')" />
        <xsl:apply-templates select="node() | *" />
        <xsl:value-of select="concat('//xml:]]&gt;&lt;/', name(), '&gt;')" />
    </xsl:template>
    
    <xsl:template match="*">
        <xsl:value-of select="concat('//xml:&lt;', name(), '&gt;')" />
        <xsl:apply-templates select="node() | *" />
        <xsl:value-of select="concat('//xml:&lt;/', name(), '&gt;')" />
    </xsl:template>
</xsl:stylesheet>

产生这个：

//xml:<JS>
  //xml:<MY_FUNCTION><![CDATA[
// comment here
let my_function = () => console.log("Hello World");
  //xml:]]></MY_FUNCTION>
  //xml:<LESS_THAN><![CDATA[
let less_than = (a,b) => a < b;
  //xml:]]></LESS_THAN>
  //xml:<GREATER_THAN><![CDATA[
let greater_than = (a,b) => a > b;
  //xml:]]></GREATER_THAN>
//xml:</JS>

现在语法高亮可以根据 JS 规则工作。

严格来说不需要使用 XSLT，您可能可以通过半途聪明的正则表达式替换来逃脱，例如 ^(\s*)(<|\]\]>) 替换为 //xml: ，假设 XML 标签总是在他们自己的行上。

您可以通过简单的搜索和替换操作删除 //xml: 将其全部转换回 XML，只要您完整保留 //xml: 注释即可。

这样做会让我们回到：

<JS>
  <MY_FUNCTION><![CDATA[
// comment here
let my_function = () => console.log("Hello World");
  ]]></MY_FUNCTION>
  <LESS_THAN><![CDATA[
let less_than = (a,b) => a < b;
  ]]></LESS_THAN>
  <GREATER_THAN><![CDATA[
let greater_than = (a,b) => a > b;
  ]]></GREATER_THAN>
</JS>

XML 包含 javascript 的 VS Code 语法突出显示

VS Code syntax highlighting for XML containing javascript

javascript

xml

visual-studio-code

syntax-highlighting

编辑 - 解决方案：

问题