Skip to content

Instantly share code, notes, and snippets.

@subhaze
Last active September 29, 2023 14:58
Show Gist options
  • Save subhaze/a754c8d17906f2a25ce2 to your computer and use it in GitHub Desktop.
Save subhaze/a754c8d17906f2a25ce2 to your computer and use it in GitHub Desktop.
very start of Angular 2 sublime syntax file
%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
- js
- ng.js
scope: source.js.ng
contexts:
main:
- match: ""
push: scope:source.js
with_prototype:
- match: '`'
push:
- meta_content_scope: text.html.basic.embedded.js
- include: 'scope:text.html.basic'
- match: '`'
pop: true
@craigcosmo
Copy link

craigcosmo commented Jan 4, 2017

%YAML1.2 is wrong. It should be %YAML 1.2 you missed a space

@craigcosmo
Copy link

that not work for me. this works for me

ng.sublime-syntax

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - ts
  - js
  - ng.js
scope: source.js.ng, source.ts
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true

@evenfrost
Copy link

Note: If you're using SublimeLinter, in order for linting to work, just add this syntax to syntax_map field in your SublimeLinter settings like this:

{
  "user": {
    "syntax_map": {
      "javascript ng": "javascript"
    }
  }
}

@ChrisGarber-Medlever
Copy link

If you're using typescript you can change push: scope:source.js to push: scope:source.ts to maintain typescript styles

@lackneets
Copy link

Can I combine with Babel ES6 syntax?

@dobredodo
Copy link

dobredodo commented Apr 19, 2019

For example we have this element <p>Hello ${this.state.user.email}</p>
can ${this.state.user.email} be recognized as javascript inside the html tag with this sublime syntax?

@coretravis
Copy link

For example we have this element <p>Hello ${this.state.user.email}</p>
can ${this.state.user.email} be recognized as javascript inside the html tag with this sublime syntax?

Did you ever find a solution to this?

@cemerson
Copy link

cemerson commented Dec 16, 2022

Does this still work in Sublime Text 4? I'm trying all the above but so far no luck. It is driving me nuts that the myVar value doesn't highlight correctly when editing an HTML file.

<h1>My Page</h1>
<script>
let myVar = `testing literal backtick here
multiple lines of string here
even more lines of string here.`
</script>

@subhaze
Copy link
Author

subhaze commented Dec 17, 2022

I'm honestly not sure, I've not used Angular for quite some time now and moved to VS Code as my main editor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment