{"id":16328043,"url":"https://github.com/ghaschel/vscode-angular-html-inline","last_synced_at":"2025-10-13T18:43:03.114Z","repository":{"id":53871018,"uuid":"231587387","full_name":"ghaschel/vscode-angular-html-inline","owner":"ghaschel","description":"vscode-angular-html syntax highlighting ported to angular inline templates","archived":false,"fork":false,"pushed_at":"2023-11-28T17:42:03.000Z","size":5365,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-15T03:42:52.401Z","etag":null,"topics":["angular","html","html5","syntax-highlighting","typescript","vscode","vscode-extension","vscode-extensions","vscode-language","vscode-plugin","vscode-plugins"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghaschel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-03T12:47:52.000Z","updated_at":"2023-11-24T19:09:59.000Z","dependencies_parsed_at":"2023-11-24T20:24:01.542Z","dependency_job_id":"85b25720-1bb6-41ac-8269-90ef1267e4f0","html_url":"https://github.com/ghaschel/vscode-angular-html-inline","commit_stats":null,"previous_names":["ghaschel/vscode-angular-html-inline"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ghaschel/vscode-angular-html-inline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaschel%2Fvscode-angular-html-inline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaschel%2Fvscode-angular-html-inline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaschel%2Fvscode-angular-html-inline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaschel%2Fvscode-angular-html-inline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghaschel","download_url":"https://codeload.github.com/ghaschel/vscode-angular-html-inline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaschel%2Fvscode-angular-html-inline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016600,"owners_count":26085852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","html","html5","syntax-highlighting","typescript","vscode","vscode-extension","vscode-extensions","vscode-language","vscode-plugin","vscode-plugins"],"created_at":"2024-10-10T23:13:33.500Z","updated_at":"2025-10-13T18:43:03.096Z","avatar_url":"https://github.com/ghaschel.png","language":"JavaScript","readme":"# vscode-angular-html-inline\n\n[![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)\n[![GitHub issues](https://img.shields.io/github/issues/ghaschel/vscode-angular-html-inline.svg)](https://github.com/ghaschel/vscode-angular-html-inline/issues)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ghaschel/vscode-angular-html-inline/blob/master/LICENSE)\n[![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)\n[![Downloads](https://vsmarketplacebadges.dev/downloads-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)\n[![Installs](https://vsmarketplacebadges.dev/installs-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)\n[![Version](https://vsmarketplacebadges.dev/version-short/ghaschel.vscode-angular-inline.png)](https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-inline)\n[![Known Vulnerabilities](https://snyk.io/test/github/ghaschel/vscode-angular-html-inline/badge.svg)](https://snyk.io/test/github/ghaschel/vscode-angular-html-inline)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/ghaschel/vscode-angular-html-inline/master/assets/angular-inline.png\" title=\"vscode-angular-html-inline\" alt=\"Logo\" /\u003e\n\u003c/div\u003e\n\n\u003e 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.\n\n## Angular HTML Template Inline Syntax Highlighting\n\nThis 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.\n\nThis 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)\n\n# Summary\n\n- [vscode-angular-html-inline](#vscode-angular-html-inline)\n  - [Angular HTML Template Inline Syntax Highlighting](#angular-html-template-inline-syntax-highlighting)\n- [Summary](#summary)\n- [General](#general)\n  - [Element differentiation (HTML/SVG/Custom/Angular)](#element-differentiation-htmlsvgcustomangular)\n  - [Customizations](#customizations)\n- [Angular](#angular)\n  - [Directives](#directives)\n  - [Interpolations](#interpolations)\n  - [Control Flow](#control-flow)\n  - [Structural tags](#structural-tags)\n- [HTML](#html)\n  - [Doctype](#doctype)\n  - [Comments](#comments)\n  - [Entities](#entities)\n  - [PrimeNG](#primeng)\n  - [Custom components](#custom-components)\n  - [DOM events](#dom-events)\n  - [Generic attributes](#generic-attributes)\n  - [Style inline](#style-inline)\n  - [Regex](#regex)\n  - [Deprecated attributes](#deprecated-attributes)\n  - [Deprecated tags](#deprecated-tags)\n  - [ARIA-prefixed attributes](#aria-prefixed-attributes)\n  - [Data attributes](#data-attributes)\n- [SVG](#svg)\n  - [Non-string attributes](#non-string-attributes)\n  - [Deprecated tags](#deprecated-tags-1)\n  - [Deprecated attributes](#deprecated-attributes-1)\n- [XML](#xml)\n  - [DTD, elements and attributes namespace](#dtd-elements-and-attributes-namespace)\n  - [Stylesheet](#stylesheet)\n- [Style tags (CSS/SASS/PostCSS/SCSS/Stylus)](#style-tags-csssasspostcssscssstylus)\n  - [CSS](#css)\n  - [SCSS](#scss)\n  - [LESS](#less)\n  - [SASS](#sass)\n  - [Stylus](#stylus)\n  - [PostCSS](#postcss)\n  - [CSS Fallback](#css-fallback)\n- [Script tag (Javascript/Typescript/Coffeescript/Dart)](#script-tag-javascripttypescriptcoffeescriptdart)\n  - [Javascript](#javascript)\n  - [Typescript](#typescript)\n  - [Coffeescript](#coffeescript)\n  - [Dart](#dart)\n  - [Javascript fallback](#javascript-fallback)\n- [Link tags](#link-tags)\n- [Theming](#theming)\n- [Translate](#translate)\n- [Changelog](#changelog)\n\n# General\n\n## Element differentiation (HTML/SVG/Custom/Angular)\n\n\u003e 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).\n\n\u003e See [vscode-angular-html - Angular-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ANGULAR-SPECIFIC-TAGS.md)\n\n\u003e See [vscode-angular-html - HTML-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/HTML-SPECIFIC-TAGS.md)\n\n\u003e See [vscode-angular-html - SVG-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SVG-SPECIFIC-TAGS.md)\n\n\u003e See [vscode-angular-html - PrimeNG-specific list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/PRIMENG.md)\n\n\u003cimg src=\"assets/tag-differentiation.png\" title=\"Element differentiation\" alt=\"Element differentiation\" /\u003e\n\n## Customizations\n\n\u003e 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).\n\n# Angular\n\n## Directives\n\n\u003cimg src=\"assets/angular-directives.png\" title=\"Angular directives\" alt=\"Angular directives\" /\u003e\n\n## Interpolations\n\n\u003cimg src=\"assets/angular-interpolations.png\" title=\"Angular Interpolations\" alt=\"Angular Interpolations\" /\u003e\n\n## Control Flow\n\n\u003cimg src=\"assets/angular-control-flow.png\" title=\"Angular Control Flow\" alt=\"Angular Control Flow\" /\u003e\n\n## Structural tags\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ANGULAR-SPECIFIC-TAGS.md)\n\n\u003cimg src=\"assets/angular-structural-tags.png\" title=\"Angular Structural Tags\" alt=\"Angular Structural Tags\" /\u003e\n\n# HTML\n\n## Doctype\n\n\u003cimg src=\"assets/doctype.png\" title=\"vscode-angular-html\" alt=\"Doctype\"/\u003e\n\n## Comments\n\n\u003cimg src=\"assets/comments.png\" title=\"vscode-angular-html\" alt=\"Comments\" /\u003e\n\n## Entities\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/HTML-ENTITIES.md)\n\n\u003cimg src=\"assets/html-entities.png\" title=\"HTML Entities\" alt=\"HTML Entities\" /\u003e\n\n## PrimeNG\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/PRIMENG.md)\n\n\u003cimg src=\"assets/prime-ng-tags.png\" title=\"Prime NG Tags\" alt=\"Prime NG Tags\" /\u003e\n\n## Custom components\n\n\u003e See [vscode-angular-html - color-customization](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SETTINGS.MD)\n\n\u003cimg src=\"assets/custom-components.png\" title=\"Custom Components\" alt=\"Custom Component\"\u003e\n\n## DOM events\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DOM-EVENTS.md)\n\n\u003cimg src=\"assets/dom-events.png\" title=\"DOM events\" alt=\"DOM events\" /\u003e\n\n## Generic attributes\n\n\u003cimg src=\"assets/generic-attributes.png\" title=\"Generic attributes\" alt=\"Generic attributes\" /\u003e\n\n## Style inline\n\n\u003cimg src=\"assets/style-inline-normal.png\" title=\"Style inline\" alt=\"Style inline\" /\u003e\n\nAnd with [colorize support](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize):\n\n\u003cimg src=\"assets/style-inline-colorize.png\" title=\"Style inline\" alt=\"Style inline with colorize\"\u003e\n\n\u003e See [vscode-angular-html - colorize settings](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/COLORIZE-SETTINGS.md)\n\n## Regex\n\n\u003cimg src=\"assets/regex.png\" title=\"Regex\" alt=\"Regex\" /\u003e\n\n## Deprecated attributes\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-HTML-ATTRIBUTES.md)\n\n\u003cimg src=\"assets/invalid-attributes.png\" title=\"Invalid attributes\" alt=\"Invalid attributes\" /\u003e\n\n## Deprecated tags\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-HTML-TAGS.md)\n\n\u003cimg src=\"assets/deprecated-html-tags.png\" title=\"Deprecated tags\" alt=\"Deprecated tags\" /\u003e\n\n## ARIA-prefixed attributes\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/ARIA-ATTRIBUTES.md)\n\n\u003cimg src=\"assets/aria-attributes.png\" title=\"Aria attributes\" alt=\"Aria attributes\" /\u003e\n\n## Data attributes\n\n\u003cimg src=\"assets/data-attributes.png\" title=\"Data attributes\" alt=\"Data attributes\" /\u003e\n\n# SVG\n\n## Non-string attributes\n\n\u003e See [vscode-angular-html - SVG's non string attributes](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/SVG-NONSTRING-ATTRIBUTES.md)\n\n\u003e 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.\n\n\u003cimg src=\"assets/svg-processing.png\" title=\"SVG Processing\" alt=\"SVG Processing\"/\u003e\n\n## Deprecated tags\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-SVG-TAGS.md)\n\n\u003cimg src=\"assets/svg-deprecated-tags.png\" title=\"SVG deprecated tags\" alt=\"SVG deprecated tags\"/\u003e\n\n## Deprecated attributes\n\n\u003e See the [vscode-angular-html - complete list](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/DEPRECATED-SVG-ATTRIBUTES.md)\n\n\u003cimg src=\"assets/svg-deprecated-attributes.png\" title=\"SVG invalid attributes\" alt=\"SVG invalid attributes\"/\u003e\n\n# XML\n\n## DTD, elements and attributes namespace\n\n\u003cimg src=\"assets/xml-dtd-namespace.png\" title=\"XML Processing\" alt=\"XML Processing\"\u003e\n\n## Stylesheet\n\n\u003cimg src=\"assets/xml-stylesheet.png\" title=\"XML Stylesheet\" alt=\"XML Stylesheet\"\u003e\n\n# Style tags (CSS/SASS/PostCSS/SCSS/Stylus)\n\n\u003e See [vscode-angular-html - scripts and style MIME-types](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/MIME-TYPES.md)\n\n\u003e See [vscode-angular-html - linting tips](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/LINTING.md)\n\n\u003e Every MIME-type shown in this section also will be highlighted in `\u003clink\u003e` elements\n\n\u003e 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\n\n## CSS\n\n\u003cimg src=\"assets/style-tag-css.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## SCSS\n\n\u003e 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.\n\n\u003cimg src=\"assets/style-tag-scss.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## LESS\n\n\u003cimg src=\"assets/style-tag-less.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## SASS\n\n\u003cimg src=\"assets/style-tag-sass.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## Stylus\n\n\u003cimg src=\"assets/style-tag-stylus.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## PostCSS\n\n\u003e 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\n\n\u003cimg src=\"assets/style-tag-postcss.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n## CSS Fallback\n\n\u003cimg src=\"assets/style-tag-css-fallback.png\" title=\"Style tag\" alt=\"Style tag\" /\u003e\n\n# Script tag (Javascript/Typescript/Coffeescript/Dart)\n\n\u003e See [vscode-angular-html - scripts and style mime-types](https://github.com/ghaschel/vscode-angular-html/blob/master/docs/MIME-TYPES.md)\n\n## Javascript\n\n\u003cimg src=\"assets/script-tag-javascript.png\" title=\"Script tags\" alt=\"Script tag\" /\u003e\n\n## Typescript\n\n\u003cimg src=\"assets/script-tag-typescript.png\" title=\"Script tags\" alt=\"Script tag\" /\u003e\n\n## Coffeescript\n\n\u003cimg src=\"assets/script-tag-coffeescript.png\" title=\"Script tags\" alt=\"Script tag\" /\u003e\n\n## Dart\n\n\u003cimg src=\"assets/script-tag-dart.png\" title=\"Script tags\" alt=\"Script tag\" /\u003e\n\n## Javascript fallback\n\n\u003cimg src=\"assets/script-tag-javascript-fallback.png\" title=\"Script tags\" alt=\"Script tag\" /\u003e\n\n# Link tags\n\n\u003cimg src=\"assets/link-tag-icon.png\" title=\"Link tags\" alt=\"Link tag\" /\u003e\n\n# Theming\n\n\u003e 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)\n\n# Translate\n\n\u003e 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)\n\n# Changelog\n\n\u003e See the [changelog](CHANGELOG.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghaschel%2Fvscode-angular-html-inline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghaschel%2Fvscode-angular-html-inline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghaschel%2Fvscode-angular-html-inline/lists"}