javascriptvisual-studio-codeglslregl

How do you get syntax highlighting in Visual Studio Code in string literal for glsl shader?


I'm using Regl which integrates glsl vertex and fragment shaders as strings within a javascript file. I'd like to have syntax highlighting in Visual Studio Code apply to the glsl code within the strings, e.g.:

var regl = createREGL();

var drawTriangle = regl({

  // fragment shader
  frag: \` // want to apply syntax higlighting to code within string
  precision mediump float;
  uniform vec4 color;
  void main () {
    gl_FragColor = color;
  }`,
...

Solution

  • There is a plugin for Visual Studio Code that mostly accomplishes this task: vscode-glsl-literal. You can search for it within Visual Studio Code and install it there. It only matches these template literals: glsl, glslify, frag, or vert. If your code doesn't use one of those (like regl), then add a comment before the string literal with glsl in it, like so:

    frag: /*glsl*/`