Go HTML template syntax highlighting for Sublime Text

README.md

Standalone Go HTML template syntax highlighting for Sublime Text

These files are part of the GoSublime package by DisposaBoy.

Hello friends. It is always very annoying to write HTML templates for a Go application in Sublime Text, and only have the HTML part of the code highlighted. Those white lines of code -- which are the most important parts of the template files -- are just not pleasant to the eye.

Luckily, DisposaBoy has made a syntax highlighter for Go HTML templates in the GoSublime package (which can be installed using Package Control), but what if you don't actually want to install the whole package just to have syntax highlighting?

The files from this gist do all the job for you and you won't even have to install the whole package! (I highly recommend you do, though -- it's really useful!)

Just save these two files into the Packages/User folder (Preferences -> Browse Packages, and then the User folder) and you're all set!

GoSublime (c) DisposaBoy.

GoHTML.sublime-syntax

%YAML 1.2
---
name: 'GoHTML'
file_extensions:
  - gohtml
  - html.go
scope: text.html.gohtml
contexts:
  main:
      - match: ''
        push: 'Packages/HTML/HTML.sublime-syntax'
        with_prototype:
          - match: '{{'
            captures:
              0: punctuation.section.embedded.begin.gotemplate
            push: Packages/User/GoTemplate.sublime-syntax
            with_prototype:
              - match: '}}'
                captures:
                  0: punctuation.section.embedded.end.gotemplate
                pop: true

GoTemplate.sublime-syntax

%YAML 1.2
---
name: 'GoTemplate'
scope: source.gotemplate
hidden: true
contexts:
  main:
    - match: ":="
      scope: keyword.operator.initialize.gotemplate
    - match: \|
      scope: keyword.operator.pipe.gotemplate
    - match: '[.$][\w]*'
      scope: variable.other.gotemplate
    - match: \b(if|else|range|template|with|end|nil|define)\b
      scope: keyword.control.gotemplate
    - match: \b(and|call|html|index|js|len|not|or|print|printf|println|urlquery|eq|ne|lt|le|gt|ge)\b
      scope: support.function.builtin.gotemplate
    - match: /\*
      push:
        - meta_scope: comment.block.gotemplate
        - match: \*/
          pop: true
    - match: '"'
      captures:
        0: punctuation.definition.string.begin.gotemplate
      push:
        - meta_scope: string.quoted.double.gotemplate
        - match: '"'
          captures:
            0: punctuation.definition.string.end.gotemplate
          pop: true
        - include: string_placeholder
        - include: string_escaped_char
    - match: "`"
      captures:
        0: punctuation.definition.string.begin.gotemplate
      push:
        - meta_scope: string.quoted.raw.gotemplate
        - match: "`"
          captures:
            0: punctuation.definition.string.end.gotemplate
          pop: true
        - include: string_placeholder
  string_escaped_char:
    - match: '\\(\\|[abfnrtv''"]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4}|U[0-9a-fA-F]{8}|[0-7]{3})'
      scope: constant.character.escape.gotemplate
    - match: \\.
      scope: invalid.illegal.unknown-escape.gotemplate
  string_placeholder:
    - match: |-
        (?x)%
            (\d+\$)?                                    # field (argument #)
            [#0\- +']*                                  # flags
            [,;:_]?                                     # separator character (AltiVec)
            ((-?\d+)|\*(-?\d+\$)?)?                     # minimum field width
            (\.((-?\d+)|\*(-?\d+\$)?)?)?                # precision
            [diouxXDOUeEfFgGaAcCsSqpnvtTbyYhHmMzZ%]     # conversion type
      scope: constant.other.placeholder.gotemplate
    - match: "%"
      scope: invalid.illegal.placeholder.gotemplate

Note: If you have multiple syntax definitions in the User package they will show up under View > Syntax > User. I dropped the two files here into their own folder (at the same level as User) and now it shows up at the top level in View > Syntax.

Thank you very much for the GoHTML tool. It really makes it easier for me to write Go code within HTML in Sublime Text. I truly appreciate your contribution in enhancing my coding experience.

I searched for this solution for a very long time!

Just one question: in the Go HTML template the comment characters are the HTML standard <!-- <div>Example</div> --> and I would like to replace them with the Go Template standard {{/* <div>Example</div> */}}.

Is this possible?

Thank you for this. This was helpful.