Atom Packages Directory

a package directory for a text editor of the 21st Century

Html Angular

Install with:
    apm install language-html-angular
  

HTML language support in Atom with Angular 2 syntax support

apm The MIT License

Adds syntax highlighting and snippets to HTML files.

Installation

Fire up a console and type:

    apm install language-html-angular

Or, inside Atom’s settings select Install and then search for this package.

Usage

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: - greenish-holidays-ng2-syntax - syntax-theme-boilerplate-syntax - tomorrow-night-eigthies-ng2-syntax - yesterday-night-eighties-ng2-syntax

Styling Scopes

Angular 2 attributes and tags scoped:

Here are the scopes used for styling the above attributes in a syntax theme:

````less

.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.

Keywords: hmtl, angular 2, ng2, syntax, highlighting, language, angular, grammar Suggest keywords
Fork me on GitHub