Adds syntax highlighting and snippets to HTML files.
Fire up a console and type:
apm install language-html-angular
Or, inside Atom's settings select Install and then search for this package.
Open a file in Atom editor and select the HTML (ng2)
file syntax option.
Ensure to use a theme packages supporting Angular 2 syntax highlighting for this package:
{{interpolation}}
[target] = "expression"
bind-target = "expression"
(target) = "statement"
on-target = "statement"
[(target)] = "expression"
bindon-target = "expression"
*ngIf
, *ngFor
, etc.{{target | operator | chain}}
<custom-tag></custom-tag>
Here are the scopes used for styling the above attributes in a syntax theme:
.html {.entity.other.attribute-name.ng {color: @yellow !important;}.punctuation.separator.key-value.ng {color: @yellow !important;}.meta.attribute-with-value.ng {color: @blue !important;}.punctuation.definition.string.begin.ng {color: @blue !important;}.punctuation.definition.string.end.ng {color: @blue !important;}.meta.toc-list.ng {color: @blue !important;}.string.interpolation.html {color: @blue !important;}.punctuation.definition.interpolation.begin.ng {color: @yellow !important;}.punctuation.definition.interpolation.end.ng {color: @yellow !important;}.meta.definition.interpolation.ng {color: @blue !important;}.string.interpolation.pipe.ng {color: @orange !important;}.meta.ngfor-attribute.ng {color: @yellow !important;}.punctuation.definition.tag.ng {color: darken(@green,15%) !important;}.punctuation.definition.tag.begin.ng {color: darken(@green,15%) !important;}.punctuation.definition.tag.end.ng {color: darken(@green,15%) !important;}.entity.name.tag.ng {color: darken(@green,15%) !important;}.entity.name.tag.other.ng {color: darken(@green,15%) !important;}.meta.tag.any.ng {color: darken(@green,15%) !important;}.meta.tag.other.ng {color: darken(@green,15%) !important;}// Interpolation Syntax.punctuation.definition.js.string.begin.ng.html {color: @444444 !important;}.punctuation.definition.js.string.end.ng.html {color: @444444 !important;}.string.operator.ng {color: @syntax-text-color !important;}.string.bracket.ng {color: @syntax-text-color !important;}.string.js.bool.ng {color: @222222 !important;}.punctuation.definition.function.begin.ng {color: @666666 !important;}.punctuation.definition.function.end.ng {color: @666666 !important;}.meta.definition.function.ng {color: @333333 !important;}}
Forked from the HTML package for Atom.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.