|
| 1 | +# Project: Ngx HTML Syntax for Sublime Text |
| 2 | + |
| 3 | +## Overview |
| 4 | +A Sublime Text syntax highlighting package for Angular 2+ HTML templates. Extends the default HTML syntax to support Angular-specific features. |
| 5 | + |
| 6 | +## Key Files |
| 7 | +- `NgxHTML.sublime-syntax` - Main syntax definition (YAML 1.2 format) |
| 8 | +- `tests/syntax_test_scopes.component.html` - Syntax test file |
| 9 | +- `Embeddings/*.sublime-syntax` - Embedded syntax definitions for CSS, HTML, RegExp in template strings |
| 10 | + |
| 11 | +## Syntax File Structure |
| 12 | +The syntax file (`NgxHTML.sublime-syntax`) is organized into sections: |
| 13 | +- HTML Customizations (extends base HTML) |
| 14 | +- Angular Directives (`*ngIf`, `[bind]`, `(event)`, `[(twoWay)]`, `#ref`) |
| 15 | +- Angular Declarations (`@let`) |
| 16 | +- Angular Statements (`@if`, `@for`, `@switch`, `@case`, `@defer`, etc.) |
| 17 | +- Angular Expressions (arrays, objects, functions, operators, literals) |
| 18 | +- Angular Variables and property access |
| 19 | + |
| 20 | +## Testing |
| 21 | +- Tests run via GitHub Actions using `SublimeText/syntax-test-action@v2` |
| 22 | +- Test file uses Sublime Text syntax test format with `<!-- ^ scope.name -->` assertions |
| 23 | +- Column positions in test assertions must align exactly with the code being tested |
| 24 | +- The `^` marker points to the same column in the line above (1-indexed) |
| 25 | + |
| 26 | +## Scope Naming Conventions |
| 27 | +- `keyword.operator.spread.ngx` - Spread operator `...` |
| 28 | +- `keyword.control.conditional.*.ngx` - Control flow keywords |
| 29 | +- `punctuation.section.*.ngx` - Brackets and delimiters |
| 30 | +- `punctuation.separator.*.ngx` - Commas and separators |
| 31 | +- `variable.other.*.ngx` - Variables |
| 32 | +- `meta.*.ngx` - Meta scopes for regions |
| 33 | + |
| 34 | +## Build/CI |
| 35 | +- GitHub Actions workflow in `.github/` |
| 36 | +- Uses Sublime Text build 4180 for syntax tests |
| 37 | +- No local test runner required; tests run in CI |
| 38 | + |
| 39 | +## Common Patterns |
| 40 | +When adding new syntax support: |
| 41 | +1. Add pattern to appropriate section in `NgxHTML.sublime-syntax` |
| 42 | +2. Use `include: ng-<context>` to compose contexts |
| 43 | +3. Add tests in `tests/syntax_test_scopes.component.html` |
| 44 | +4. Ensure test `^` markers align with exact column positions |
0 commit comments