如何在Sublime中为webgl/glsl内联脚本标签突出显示语法

我正在尝试在html文件的脚本标签中为glsl片段着色器进行语法突出显示/着色。

即使我在Sublime Text中安装了所有相关的Shader语法包，我仍然没有突出显示语法。我相信这些只能解决外部文件或非HTML文件的问题。但是我正在使用内部脚本标签。

有人遇到过这个吗？

的确，您是正确的，在Sublime中，语法定义通常基于外部标准来指代特定类型的文件：文件具有的扩展名，文件的第一行（例如bash shebang）或用户明确覆盖了自动检测功能。

一种语法可能允许另一种语法临时“控制”语法高亮显示，但这需要由基本语法定义的作者来实施。系统需要知道什么时候应该输入新的语法，什么时候应该退回到前一个语法，以及（最重要的是）在两者之间实际使用什么语法。

例如，Sublime附带了一种可单独应用于.js文件的Javascript语法，但是其随附的HTML语法还包括一个规则，该规则允许通过将适当出现封闭标签时取回。

因此，在您的情况下，您想做的事在技术上是可能的，但是可以说，它不是“开箱即用”的；您需要一种HTML语法，该语法应专门处理该类型的脚本标记。包控制中可能已经存在这样的语法。如果您愿意，这也是可以进行的修改。该答案的其余部分将告诉您如何执行此操作（底部还有一个指向修改后的文件的链接）。

基本思想是我们将创建overrideSublime附带的HTML语法文件。顾名思义，这意味着将始终使用我们正在创建的文件代替Sublime随附的文件。但是请注意，即使基础文件得到更新，更改后的文件仍将被使用（并且不会收到直接警告）。OverrideAudit程序包的一项功能（免责声明：我是作者）是告诉您何时发生这种情况，从而确保您不会错过基础文件中的新功能或错误修复。

这些说明还假定您使用的是Sublime的最新稳定版本，目前为3176。新版本通常会带来新的语法，因此，如果您现在运行的是旧版本（如果您来自神秘的未来，则为新版本），基本说明将保持不变，但文件的内容可能会有所不同。正如我们将看到的，我们的更改基于复制现有功能。

1.打开HTML语法进行编辑

如果尚未安装，请安装PackageResourceViewer程序包，然后使用PackageResourceViewer: Open Resource命令面板中的命令（确保您不小心选择了extract变体）HTML，然后首先选择程序包，然后选择HTML.sublime-syntax文件。这将打开文件以供编辑；保存文件时，将自动为您创建替代。

在幕后，这是在文件夹HTML中创建一个名为Packages（用于Preferences > Browse Packages...查找）的文件夹，并将资源文件的副本存储在其中。删除该文件将恢复原始语法。

您可以使用View Package File内置命令打开HTML/HTML.sublime-syntax资源并将其保存在适当的位置，以手动创建替代。如果这样做，则需要关闭并重新打开该文件，因为它将以只读方式打开。

2.告诉语法如何识别着色器标签

在打开的语法文件的顶部附近是一组variables，它们在语法中是一种提供命名的正则表达式的方法，使以下步骤更易于阅读。在变量列表中是一个名为的变量Javascript_mime_type，其定义如下：

  Javascript_mime_type: |-
    (?ix)(?:
      # https://mimesniff.spec.whatwg.org/#Javascript-mime-type
      (?:application|text)/(?:x-)?(?:java|ecma)script
      | text/Javascript1\.[0-5]
      | text/jscript
      | text/livescript
    )

在此之下，我们将创建自己的变量，该变量包含正则表达式以匹配typescript标记属性的内部。下面是一个示例：

  shader_mime_type: |-
    (?ix)(?:
      x-shader/x-fragment
    )

这可能需要扩展，也可能不需要扩展（我不知道该标签如何用于WebGL）。如果可能的内容有多个变体，则可以像上面的Javascript示例中一样扩展它，以包括其他内容。

3.包含嵌入GLSL语法的上下文

在文件的更下方（在内部版本3176中，在进行上述更改之后，大约在315行左右）是一个名为的上下文script-Javascript，该上下文包含用于了解如何突出显示基于Javascript的

第几行包括用于语法突出显示在属性的其余部分的逻辑标记是逃避embed并返回常规HTML的内容。

  script-glsl:
    - meta_content_scope: meta.tag.script.begin.html
    - include: script-common
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set:
        - include: script-close-tag
        - match: (?=\S)
          embed: scope:source.glsl
          embed_scope: source.glsl.embedded.html
          escape: (?i)(?=(?:-->\s*)?

如我们所见，这几乎与上面的相同，但是使用了不同的范围（更多内容见下文）。

4.告诉script标签我们的新规则

我们已经奠定了基础，现在将所有内容捆绑在一起。在文件的下方（在3176中，经过上述更改，这大约是390行），有一组名为的规则script-type-decider。在这种情况下，有五个匹配规则，为简洁起见，我们仅在此处显示第一个规则。

  script-type-decider:
    - match: (?i)(?={{Javascript_mime_type}}(?!{{unquoted_attribute_value}})|'{{Javascript_mime_type}}'|"{{Javascript_mime_type}}")
      set:
        - script-Javascript
        - tag-generic-attribute-meta
        - tag-generic-attribute-value


此上下文列出了在标签type属性内部时应用的规则，以查看该特定标签的内容应如何处理。这里特别引用的规则使用上面概述的变量来确定这是一个Javascript标记，并使用我们刚刚看过的规则嵌入Javascript语法。

在这下面match（规则的顺序很重要），我们将match使用我们自己的变量和规则集添加自己的内容来模仿这一内容：

    - match: (?i)(?={{shader_mime_type}}(?!{{unquoted_attribute_value}})|'{{shader_mime_type}}'|"{{shader_mime_type}}")
      set:
        - script-glsl
        - tag-generic-attribute-meta
        - tag-generic-attribute-value


5.使更改生效

完成所有更改后，您要做的就是save使这些文件处于活动状态。一旦这样做，Sublime将立即重新编译已更改的语法文件并将其生效。Sublime控制台（View > Show Console）会说出generating syntax summary何时执行此操作。如果您没有看到任何错误消息，则可以开始：



本摘要提供了完整版本的文件，其中包含所讨论的更改，以进行比较，并用于生成上述图像。要点以基本文件的修订版1和修改版本的版本2进行布局，因此很容易准确地看到对该文件进行了哪些更改。



最后说明

值得一提的是，包问题实际上提供了三种不同的语法（Cg，HLSL和GLSL）。上面的语法修改仅处理GLSL语法嵌入，我猜这就是您想要的。

按照与上述相同的说明，您可以交换使用的语法或为其他语法添加规则（假设您知道标记中type应包含哪些内容以区分它们）。如果存在另一种提供主观“更好”突出显示体验的语法，则同样的规则也将适用。

难题的重要部分scope是嵌入式语法中使用的那个。在上面的示例中，我们使用source.glsl，这是您正在使用的包中此文件类型的语法定义中直接定义的内容。

该软件包中的其他范围是source.cg和source.hlsl。确定适当范围的最简单方法是创建一个新文件，使用Set Syntax:命令面板中的适当项目设置空缓冲区的语法，并使用Tools > Developer > Show Scope Name一个弹出窗口来告诉您。