docs: fix formatting and highlighting issues (angular#57144)

PR Close angular#57144

Author: eneajaho

adev/src/content/best-practices/a11y.md

@@ -128,23 +128,23 @@ The `RouterLinkActive` directive provides the `ariaCurrentWhenActive` input whic
 The following example shows how to apply the `active-page` class to active links as well as setting their `aria-current` attribute to `"page"` when they are active:
 
 ```angular-html
-    <nav>
-      <a routerLink="home"
-         routerLinkActive="active-page"
-         ariaCurrentWhenActive="page">
-        Home
-      </a>
-      <a routerLink="about"
-         routerLinkActive="active-page"
-         ariaCurrentWhenActive="page">
-        About
-      </a>
-      <a routerLink="shop"
-         routerLinkActive="active-page"
-         ariaCurrentWhenActive="page">
-        Shop
-      </a>
-    </nav>
+<nav>
+  <a routerLink="home"
+      routerLinkActive="active-page"
+      ariaCurrentWhenActive="page">
+    Home
+  </a>
+  <a routerLink="about"
+      routerLinkActive="active-page"
+      ariaCurrentWhenActive="page">
+    About
+  </a>
+  <a routerLink="shop"
+      routerLinkActive="active-page"
+      ariaCurrentWhenActive="page">
+    Shop
+  </a>
+</nav>
 ```
 
 <!-- vale Angular.Angular_Spelling = NO -->

adev/src/content/examples/router/src/app/app.component.1.html

@@ -4,4 +4,4 @@ <h1>Angular Router</h1>
   <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
   <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
 </nav>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

adev/src/content/guide/components/advanced-configuration.md

@@ -34,7 +34,7 @@ By default, Angular throws an error when it encounters an unknown HTML element.
 disable this behavior for a component by including `CUSTOM_ELEMENTS_SCHEMA` in the `schemas`
 property in your component metadata.
 
-```ts
+```angular-ts
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 
 @Component({

adev/src/content/guide/components/anatomy-of-components.md

@@ -11,7 +11,7 @@ Every component must have:
 
 You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
 
-<docs-code language="ts" highlight="[1, 2, 3, 4]">
+<docs-code language="angular-ts" highlight="[1, 2, 3, 4]">
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
@@ -25,7 +25,7 @@ The object passed to the `@Component` decorator is called the component's **meta
 
 Components can optionally include a list of CSS styles that apply to that component's DOM:
 
-<docs-code language="ts" highlight="[4]">
+<docs-code language="angular-ts" highlight="[4]">
 @Component({
   selector: 'profile-photo',
   template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
@@ -38,7 +38,7 @@ By default, a component's styles only affect elements defined in that component'
 
 You can alternatively choose to write your template and styles in separate files:
 
-<docs-code language="ts" highlight="[3, 4]">
+<docs-code language="angular-ts" highlight="[3, 4]">
 @Component({
   selector: 'profile-photo',
   templateUrl: 'profile-photo.html',
@@ -55,7 +55,7 @@ Both `templateUrl` and `styleUrl` are relative to the directory in which the com
 
 Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors):
 
-<docs-code language="ts" highlight="[2]">
+<docs-code language="angular-ts" highlight="[2]">
 @Component({
   selector: 'profile-photo',
   ...
@@ -67,7 +67,7 @@ See [Component Selectors](guide/components/selectors) for details about which ty
 
 You use a component by creating a matching HTML element in the template of _other_ components:
 
-<docs-code language="ts" highlight="[4]">
+<docs-code language="angular-ts" highlight="[4]">
 @Component({
   selector: 'user-profile',
   template: `

adev/src/content/guide/components/content-projection.md

@@ -5,7 +5,7 @@ Tip: This guide assumes you've already read the [Essentials Guide](essentials).
 You often need to create components that act as containers for different types of content. For
 example, you may want to create a custom card component:
 
-```ts
+```angular-ts
 @Component({
   selector: 'custom-card',
   template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
@@ -15,7 +15,7 @@ export class CustomCard {/* ... */}
 
 **You can use the `<ng-content>` element as a placeholder to mark where content should go**:
 
-```ts
+```angular-ts
 @Component({
   selector: 'custom-card',
   template: '<div class="card-shadow"> <ng-content></ng-content> </div>',
@@ -30,7 +30,7 @@ but with some Angular-specific functionality.
 When you use a component with `<ng-content>`, any children of the component host element are
 rendered, or **projected**, at the location of that `<ng-content>`:
 
-```ts
+```angular-ts
 // Component source
 @Component({
   selector: 'custom-card',

adev/src/content/guide/components/host-elements.md

@@ -6,7 +6,7 @@ Angular creates an instance of a component for every HTML element that matches t
 selector. The DOM element that matches a component's selector is that component's **host element**.
 The contents of a component's template are rendered inside its host element.
 
-```ts
+```angular-ts
 // Component source
 @Component({
   selector: 'profile-photo',
@@ -41,7 +41,7 @@ A component can bind properties, attributes, and events to its host element. Thi
 identically to bindings on elements inside the component's template, but instead defined with
 the `host` property in the `@Component` decorator:
 
-```ts
+```angular-ts
 @Component({
   ...,
   host: {
@@ -68,7 +68,7 @@ decorator to class members.
 
 `@HostBinding` lets you bind host properties and attributes to properties and methods:
 
-```ts
+```angular-ts
 @Component({
   /* ... */
 })
@@ -105,7 +105,7 @@ decorators exist exclusively for backwards compatibility.
 When you use a component in a template, you can add bindings to that component instance's element.
 The component may _also_ define host bindings for the same properties or attributes.
 
-```ts
+```angular-ts
 @Component({
   ...,
   host: {

adev/src/content/guide/components/importing.md

@@ -10,7 +10,7 @@ A **standalone component** is a component that sets `standalone: true` in its co
 Standalone components directly import other components, directives, and pipes used in their
 templates:
 
-<docs-code language="ts" highlight="[2, [8, 9]]">
+<docs-code language="angular-ts" highlight="[2, [8, 9]]">
 @Component({
   standalone: true,
   selector: 'profile-photo',

adev/src/content/guide/components/inheritance.md

@@ -24,7 +24,7 @@ When a component extends another component or a directive, it inherits all the m
 the base class's decorator and the base class's decorated members. This includes the selector,
 template, styles, host bindings, inputs, outputs, lifecycle methods, and any other settings.
 
-```ts
+```angular-ts
 @Component({
   selector: 'base-listbox',
   template: `

adev/src/content/guide/components/programmatic-rendering.md

@@ -11,7 +11,7 @@ or in your TypeScript code with `ViewContainerRef`.
 `NgComponentOutlet` is a structural directive that dynamically renders a given component in a
 template.
 
-```ts
+```angular-ts
 @Component({ ... })
 export class AdminBio { /* ... */ }
 
@@ -46,7 +46,7 @@ You can use the `createComponent`method on `ViewContainerRef` to dynamically cre
 component. When you create a new component with a `ViewContainerRef`, Angular appends it into the
 DOM as the next sibling of the component or directive that injected the `ViewContainerRef`.
 
-```ts
+```angular-ts
 @Component({
   selector: 'leaf-content',
   template: `
@@ -99,7 +99,7 @@ You can use both of the approaches described above, `NgComponentOutlet` and `Vie
 render components that are lazy-loaded with a standard
 JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import).
 
-```ts
+```angular-ts
 @Component({
   ...,
   template: `
@@ -113,7 +113,8 @@ JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Re
         Load advanced settings
       </button>
       <ng-container *ngComponentOutlet="advancedSettings" />
-    </section>`
+    </section>
+  `
 })
 export class AdminSettings {
   advancedSettings: {new(): AdminSettings} | undefined;

adev/src/content/guide/components/queries.md

@@ -12,7 +12,7 @@ There are two categories of query: **view queries** and **content queries.**
 
 View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `@ViewChild` decorator.
 
-<docs-code language="ts" highlight="[14, 16, 17, 18]">
+<docs-code language="angular-ts" highlight="[14, 16, 17, 18]">
 @Component({
   selector: 'custom-card-header',
   ...
@@ -42,7 +42,7 @@ If the query does not find a result, its value is `undefined`. This may occur if
 
 You can also query for multiple results with the `@ViewChildren` decorator.
 
-<docs-code language="ts" highlight="[17, 19, 20, 21, 22, 23]">
+<docs-code language="angular-ts" highlight="[17, 19, 20, 21, 22, 23]">
 @Component({
   selector: 'custom-card-action',
   ...,
@@ -77,7 +77,7 @@ export class CustomCard {
 
 Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `@ContentChild` decorator.
 
-<docs-code language="ts" highlight="[14, 16, 17, 18, 25]">
+<docs-code language="angular-ts" highlight="[14, 16, 17, 18, 25]">
 @Component({
   selector: 'custom-toggle',
   ...
@@ -106,6 +106,7 @@ export class CustomExpando {
     </custom-expando>
   `
 })
+export class UserProfile { }
 </docs-code>
 
 In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`.
@@ -118,7 +119,7 @@ By default, content queries find only _direct_ children of the component and do
 
 You can also query for multiple results with the `@ContentChildren` decorator.
 
-<docs-code language="ts" highlight="[14, 16, 17, 18, 19, 20]">
+<docs-code language="angular-ts" highlight="[14, 16, 17, 18, 19, 20]">
 @Component({
   selector: 'custom-menu-item',
   ...
@@ -150,6 +151,7 @@ export class CustomMenu {
     </custom-menu>
   `
 })
+export class UserProfile { }
 </docs-code>
 
 `@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
@@ -165,7 +167,7 @@ Most of the time, you want to use a component or directive as your locator.
 You can alternatively specify a string locator corresponding to
 a [template reference variable](guide/templates/reference-variables).
 
-```ts
+```angular-ts
 @Component({
   ...,
   template: `
@@ -188,7 +190,7 @@ Tip: See [Dependency Injection](guide/di) for background on providers and Angula
 
 For more advanced cases, you can use any `ProviderToken` as a locator. This lets you locate elements based on component and directive providers.
 
-```ts
+```angular-ts
 const SUB_ITEM = new InjectionToken<string>('sub-item');
 
 @Component({
@@ -213,7 +215,7 @@ All query decorators accept an options object as a second parameter. These optio
 
 `@ViewChild` and `@ContentChild` queries accept the `static` option.
 
-```ts
+```angular-ts
 @Component({
   selector: 'custom-card',
   template: '<custom-card-header>Visit sunny California!</custom-card-header>',
@@ -237,7 +239,7 @@ The `static` option is not available for `@ViewChildren` and `@ContentChildren`
 
 By default, content queries find only _direct_ children of the component and do not traverse into descendants.
 
-<docs-code language="ts" highlight="[13, 14, 15, 16]">
+<docs-code language="angular-ts" highlight="[13, 14, 15, 16]">
 @Component({
   selector: 'custom-expando',
   ...
@@ -257,6 +259,7 @@ export class CustomExpando {
     </custom-expando>
   `
 })
+export class UserProfile { }
 </docs-code>
 
 In the example above, `CustomExpando` cannot find `<custom-toggle>` because it is not a direct child of `<custom-expando>`. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates.