如何在Visual Studio Code中为字符串内的GLSL代码实现语法高亮？

以下两种方法可以快速实现需求：

方法一：通用GLSL扩展+注释标记 #

安装Shader languages support for VS Code扩展，这是VS Code上最常用的GLSL语法支持工具。之后只需在GLSL模板字符串前添加/* glsl */注释标记，扩展就能自动识别并启用语法高亮：

var regl = createREGL();

var drawTriangle = regl({
  // fragment shader
  frag: /* glsl */`
  precision mediump float;
  uniform vec4 color;
  void main () {
    gl_FragColor = color;
  }`,
  // 顶点着色器同理
  vert: /* glsl */`
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0, 1);
  }`
});

方法二：专门的GLSL模板字符串扩展 #

安装GLSL Literal扩展，它专门针对JS/TS文件中嵌入的GLSL模板字符串做优化。对于Regl这种通过frag/vert字段传入GLSL代码的场景，它能自动识别这些字段内的字符串并高亮，无需额外添加注释标记：

var regl = createREGL();

var drawTriangle = regl({
  frag: `
  precision mediump float;
  uniform vec4 color;
  void main () {
    gl_FragColor = color;
  }`,
  vert: `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0, 1);
  }`
});

如果遇到扩展识别不灵敏的情况，手动添加/* glsl */注释标记是最稳妥的方案，几乎所有GLSL相关扩展都支持这个识别规则。

内容的提问来源于stack exchange，提问作者snibbe