Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/princemaple/ngx-html-syntax
Ngx (Angular2+) HTML Syntax for SublimeText
https://github.com/princemaple/ngx-html-syntax
angular angular2 html ngx sublime-text syntax-highlighting
Last synced: 3 months ago
JSON representation
Ngx (Angular2+) HTML Syntax for SublimeText
- Host: GitHub
- URL: https://github.com/princemaple/ngx-html-syntax
- Owner: princemaple
- License: mit
- Created: 2016-10-07T06:30:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-27T14:41:51.000Z (3 months ago)
- Last Synced: 2024-10-27T16:43:30.182Z (3 months ago)
- Topics: angular, angular2, html, ngx, sublime-text, syntax-highlighting
- Language: HTML
- Homepage: https://packagecontrol.io/packages/Ngx%20HTML
- Size: 51.8 KB
- Stars: 15
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-html-syntax - Angular HTML Syntax for 🌎 [SublimeText](www.sublimetext.com/). (Table of contents / Angular)
- awesome-angular - ngx-html-syntax - Angular HTML Syntax for [SublimeText](https://www.sublimetext.com/). (Table of contents / Angular)
README
# Ngx (Angular2+) HTML Syntax for SublimeText
based on the official sublime html syntax
## Features
So that it's not broken when there are
- `[input]`
- `[@animation]`
- `(output)`
- `(@animation.event)`
- `#reference`
- `*template`
- `[(bananaBox)]`
attributes on the tags
## Plus
Highlighting the JS part as JS. So,
- in `[myBinding]="myVar"`, you should see `myVar` as an JS variable instead of string content
- i.e. `myVar` should be highlighted differently from `"`s
- in `*ngFor="let column of columns"`, you should see `let` and `of` highlighted as keywords
- in `(change)="update()"`, you should see `update` as function name
- in `a && b` within an Angular expression, you should see `&&` correctly highlighted as the JS operator instead of an error you would see in normal HTML syntax.
- in `{{1 + 2}}` interpolations, you should see JS syntax highlighting as well
## And...
Now it supports Angular control flow.
```
@let myVar = myObservable | async;
```
```
@for (item of items) {
{{item.title}}
} @empty {
No Items
}
```
```
@if (users$ | async; as users) {
{{ users.length }}
}
```
```
@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}
```
```
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}
```
## How to use
The syntax is listed as `Ngx HTML` in Sublime syntax selection list.
I personaly use [ApplySyntax](https://github.com/facelessuser/ApplySyntax) plugin
with the following setting:
```json
"syntaxes": [
{
"syntax": "Ngx HTML/NgxHTML",
"extensions": ["component.html"],
},
]
```
You could use it in other ways...
e.g. set it as the default syntax for all html files, since it's a superset of the html syntax anyway.