• Packages
  • Themes
  • Documentation
  • Blog
  • Discussions
Sign in

language-html-angular

HTML language support for Angular 2 in Atom
  • #hmtl
  • #angular 2
  • #ng2
  • #syntax
  • #highlighting
drootz
1.0.16 11,712
10
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

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:

  • {{interpolation}}
  • [target] = "expression"
  • bind-target = "expression"
  • (target) = "statement"
  • on-target = "statement"
  • [(target)] = "expression"
  • bindon-target = "expression"
  • *ngIf, *ngFor, etc.
  • Pipe Operator: {{target | operator | chain}}
  • Template Tags: <custom-tag></custom-tag>
  • Interpolation syntax highlighting

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.

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by