Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ghaschel/vscode-angular-html-inline

vscode-angular-html syntax highlighting ported to angular inline templates
https://github.com/ghaschel/vscode-angular-html-inline

angular html html5 syntax-highlighting typescript vscode vscode-extension vscode-extensions vscode-language vscode-plugin vscode-plugins

Last synced: about 2 months ago
JSON representation

vscode-angular-html syntax highlighting ported to angular inline templates

Awesome Lists containing this project

README

        

# vscode-angular-html-inline

[![SemVer](https://img.shields.io/github/tag/ghaschel/vscode-angular-html-inline.svg)](https://img.shields.io/github/tag/ghaschel/vscode-angular-html-inline.svg)
[![GitHub issues](https://img.shields.io/github/issues/ghaschel/vscode-angular-html-inline.svg)](https://github.com/ghaschel/vscode-angular-html-inline/issues)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ghaschel/vscode-angular-html-inline/blob/master/LICENSE)
[![NodeJS with Gulp](https://github.com/ghaschel/vscode-angular-html-inline/actions/workflows/npm-gulp.yml/badge.svg?event=push)](https://github.com/ghaschel/vscode-angular-html-inline/actions/workflows/npm-gulp.yml)
[![Downloads](https://vsmarketplacebadges.dev/downloads-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)
[![Installs](https://vsmarketplacebadges.dev/installs-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)
[![Version](https://vsmarketplacebadges.dev/version-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)
[![Known Vulnerabilities](https://snyk.io/test/github/ghaschel/vscode-angular-html-inline/badge.svg)](https://snyk.io/test/github/ghaschel/vscode-angular-html-inline)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)


Logo

> Note: No theme will have the highlighting displayed in these images. For that effect, run the `vscode-angular-html: Set legacy color customizations` command from the command pallete and you're good to go.

## Angular HTML Template Inline Syntax Highlighting

This plugin is a wrapper for [vscode-angular-html](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-html) and supports everything that said one does.

This plugin adds syntax highlighting for angular HTML template files in VS Code. It supports the angular syntax itself, HTML DOM events, SVG, XML (with DTD and namespaces support), emphasizes deprecated and obsolete tags and attributes usage according to the current status of HTML. Also supports custom colors for extra-matched scopes. See [settings](docs/SETTINGS.md)

# Summary

- [vscode-angular-html-inline](#vscode-angular-html-inline)
- [Angular HTML Template Inline Syntax Highlighting](#angular-html-template-inline-syntax-highlighting)
- [Summary](#summary)
- [General](#general)
- [Element differentiation (HTML/SVG/Custom/Angular)](#element-differentiation-htmlsvgcustomangular)
- [Customizations](#customizations)
- [Angular](#angular)
- [Directives](#directives)
- [Interpolations](#interpolations)
- [Control Flow](#control-flow)
- [Structural tags](#structural-tags)
- [HTML](#html)
- [Doctype](#doctype)
- [Comments](#comments)
- [Entities](#entities)
- [PrimeNG](#primeng)
- [Custom components](#custom-components)
- [DOM events](#dom-events)
- [Generic attributes](#generic-attributes)
- [Style inline](#style-inline)
- [Regex](#regex)
- [Deprecated attributes](#deprecated-attributes)
- [Deprecated tags](#deprecated-tags)
- [ARIA-prefixed attributes](#aria-prefixed-attributes)
- [Data attributes](#data-attributes)
- [SVG](#svg)
- [Non-string attributes](#non-string-attributes)
- [Deprecated tags](#deprecated-tags-1)
- [Deprecated attributes](#deprecated-attributes-1)
- [XML](#xml)
- [DTD, elements and attributes namespace](#dtd-elements-and-attributes-namespace)
- [Stylesheet](#stylesheet)
- [Style tags (CSS/SASS/PostCSS/SCSS/Stylus)](#style-tags-csssasspostcssscssstylus)
- [CSS](#css)
- [SCSS](#scss)
- [LESS](#less)
- [SASS](#sass)
- [Stylus](#stylus)
- [PostCSS](#postcss)
- [CSS Fallback](#css-fallback)
- [Script tag (Javascript/Typescript/Coffeescript/Dart)](#script-tag-javascripttypescriptcoffeescriptdart)
- [Javascript](#javascript)
- [Typescript](#typescript)
- [Coffeescript](#coffeescript)
- [Dart](#dart)
- [Javascript fallback](#javascript-fallback)
- [Link tags](#link-tags)
- [Theming](#theming)
- [Translate](#translate)
- [Changelog](#changelog)

# General

## Element differentiation (HTML/SVG/Custom/Angular)

> The highlighting displayed in this specific section is not part of the legacy color customization, and can be achieved by changing [vscode-angular-html - extension' settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SETTINGS.md).

> See [vscode-angular-html - Angular-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ANGULAR-SPECIFIC-TAGS.md)

> See [vscode-angular-html - HTML-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/HTML-SPECIFIC-TAGS.md)

> See [vscode-angular-html - SVG-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SVG-SPECIFIC-TAGS.md)

> See [vscode-angular-html - PrimeNG-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/PRIMENG.md)

Element differentiation

## Customizations

> There are a ton of customizations available, and everything can be changed in [vscode-angular-html - extension' settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SETTINGS.md).

# Angular

## Directives

Angular directives

## Interpolations

Angular Interpolations

## Control Flow

Angular Control Flow

## Structural tags

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ANGULAR-SPECIFIC-TAGS.md)

Angular Structural Tags

# HTML

## Doctype

Doctype

## Comments

Comments

## Entities

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/HTML-ENTITIES.md)

HTML Entities

## PrimeNG

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/PRIMENG.md)

Prime NG Tags

## Custom components

> See [vscode-angular-html - color-customization](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SETTINGS.MD)

Custom Component

## DOM events

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DOM-EVENTS.md)

DOM events

## Generic attributes

Generic attributes

## Style inline

Style inline

And with [colorize support](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize):

Style inline with colorize

> See [vscode-angular-html - colorize settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/COLORIZE-SETTINGS.md)

## Regex

Regex

## Deprecated attributes

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-HTML-ATTRIBUTES.md)

Invalid attributes

## Deprecated tags

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-HTML-TAGS.md)

Deprecated tags

## ARIA-prefixed attributes

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ARIA-ATTRIBUTES.md)

Aria attributes

## Data attributes

Data attributes

# SVG

## Non-string attributes

> See [vscode-angular-html - SVG's non string attributes](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SVG-NONSTRING-ATTRIBUTES.md)

> Elements like stroke can benefit from the [colorize settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/COLORIZE-SETTINGS.md) as the [style inline](#style-inline) section.

SVG Processing

## Deprecated tags

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-SVG-TAGS.md)

SVG deprecated tags

## Deprecated attributes

> See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-SVG-ATTRIBUTES.md)

SVG invalid attributes

# XML

## DTD, elements and attributes namespace

XML Processing

## Stylesheet

XML Stylesheet

# Style tags (CSS/SASS/PostCSS/SCSS/Stylus)

> See [vscode-angular-html - scripts and style MIME-types](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/MIME-TYPES.md)

> See [vscode-angular-html - linting tips](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/LINTING.md)

> Every MIME-type shown in this section also will be highlighted in `` elements

> Every style tag in this section can also benefit from the [colorize settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/COLORIZE-SETTINGS.md) as the [style inline](#style-inline) section

## CSS

Style tag

## SCSS

> The displayed highlighting is achieved via [vscode-angular-scss](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-scss) and it fallbacks to the default one if not installed.

Style tag

## LESS

Style tag

## SASS

Style tag

## Stylus

Style tag

## PostCSS

> The displayed highlighting is achieved via [language-postcss](https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss) and it may be replaced with another extension as soon as [this merge](https://github.com/csstools/postcss-language/pull/13) is released in a new version of the plugin

Style tag

## CSS Fallback

Style tag

# Script tag (Javascript/Typescript/Coffeescript/Dart)

> See [vscode-angular-html - scripts and style mime-types](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/MIME-TYPES.md)

## Javascript

Script tag

## Typescript

Script tag

## Coffeescript

Script tag

## Dart

Script tag

## Javascript fallback

Script tag

# Link tags

Link tag

# Theming

> If you want to create a theme and support this extension, please checkout [vscode-angular-html - theming docs](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/THEMING.md)

# Translate

> If you want to help translating this extension, please checkout the [vscode-angular-html - localization docs](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/LOCALIZATION.md)

# Changelog

> See the [changelog](CHANGELOG.md)