OLD SCHOOL: ES6 template GLSL highlighting in Sublime Text

Resources
1

I returned to Sublime Text because everything just works instantly and the CPU usage is next to none, unlike with electron-based editors like VS Code which have tiny delays here and there. Here’s a minimal JavaScript syntax extension which adds support for highlighting GLSL in ES6 templates.

The instructions are in the comments:

%YAML 1.2
# GLSL syntax highlighting for ES6 templates prefixed with /* glsl */`` or glsl``

# 1. Install package: OpenGL Shadoing Language(GLSL) (enabled scope:source.glsl)
# 2. Menu: Tools > Developer > New Syntax...
# 3. Paste the contents of this file and save as glsl-template.sublime-syntax
# 4. Open any .js file and select Menu: View > Syntax > JavaScript with GLSL Templates
# 5. Create a global function or export it from somewhre. It's just a pass-through function, only used to enable the highlighting.
# function glsl(strings, ...values) {
#  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '')
# }

# 6. Now either import the above or use global "glsl" to add highlighting to GLSL strings i.e.
# const vertexShader = glsl`
#   unfirom vec3 position;
# `

# Updating if a Sublime update breaks this:
# 1. Unizip SublimeText/Packages/JavaScript.sublime-package to a new folder (use 7-zip directly or change the extension .zip and unzip)
# 2. You'll find JavaScript.sublime-syntax inside
# 3. Check if literal-string-template-begin is still there or was changed
# 4. Find a rule i.e. literal-string-template-css (literal-string-template-glsl was derived from these). Compare with the last working version for any changes.
# 5. Update this file with any changes you found and see if it works
---
name: JavaScript + inline GLSL
file_extensions:
  - js
scope: source.js.glsl
version: 2
extends: Packages/JavaScript/JavaScript.sublime-syntax

contexts:
  literal-string-template-begin:
    - meta_prepend: true
    - include: literal-string-template-glsl

  literal-string-template-glsl:
    - match: (?i:((/\*)\s*glsl\s*(\*/))|(glsl))\s*({{tagged_template_quote_begin}}{{trailing_wspace}}?)
      captures:
        1: comment.block.js
        2: punctuation.definition.comment.begin.js
        3: punctuation.definition.comment.end.js
        4: variable.function.tagged-template.js
        5: meta.string.template.js string.quoted.other.js
        6: punctuation.definition.string.begin.js
      embed: scope:source.glsl
      embed_scope: meta.string.template.js source.glsl.embedded.js
      escape: '{{leading_wspace}}?({{tagged_template_quote_escape}})'
      escape_captures:
        0: meta.string.template.js string.quoted.other.js
        1: punctuation.definition.string.end.js
      pop: true
1 Like