docs: set syntax highlighting of code examples MD code blocks (#59026)

Set the syntax highlighting based on the code examples' language. PR Close #59026
2026-09-14 13:54:52 +08:00 · 2024-12-03 16:59:35 +02:00
parent dc7d555e42
commit 0513fbc9fc
140 changed files with 397 additions and 400 deletions
@@ -57,7 +57,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
 *
 * The code below will be converted from:
 *
- * ```
+ * ```ts
 * sequence([
 *   style({ opacity: 0 }),
 *   animate(1000, style({ opacity: 0 }))
@@ -65,7 +65,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
 * ```
 *
 * To:
- * ```
+ * ```ts
 * keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }]
 * duration = 1000
 * delay = 0
@@ -104,7 +104,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
 * Each timeline has a `backFill` property which is responsible for filling in new styles into
 * already processed keyframes if a new style shows up later within the animation sequence.
 *
- * ```
+ * ```ts
 * sequence([
 *   style({ width: 0 }),
 *   animate(1000, style({ width: 100 })),
@@ -10,7 +10,7 @@
 * An instance of this class is returned as an event parameter when an animation
 * callback is captured for an animation either during the start or done phase.
 *
- * ```typescript
+ * ```ts
 * @Component({
 *   host: {
 *     '[@myAnimationTrigger]': 'someExpression',
@@ -488,7 +488,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
 * The provided animation value is expected to be an array consisting of state and
 * transition declarations.
 *
- * ```typescript
+ * ```ts
 * @Component({
 *   selector: "my-component",
 *   templateUrl: "my-component-tpl.html",
@@ -518,7 +518,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
 * The `transition` animation method also supports reading an inline function which can decide
 * if its associated animation should be run.
 *
- * ```typescript
+ * ```ts
 * // this method is run each time the `myAnimationTrigger` trigger value changes.
 * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
 string]: any}): boolean {
@@ -551,7 +551,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
 *
 * The following example shows how to use this feature:
 *
- * ```typescript
+ * ```angular-ts
 * @Component({
 *   selector: 'my-component',
 *   template: `
@@ -580,7 +580,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
 * This means that you can disable all animations for an app
 * by placing a host binding set on `@.disabled` on the topmost Angular component.
 *
- * ```typescript
+ * ```ts
 * import {Component, HostBinding} from '@angular/core';
 *
 * @Component({
@@ -654,12 +654,12 @@ export function trigger(name: string, definitions: AnimationMetadata[]): Animati
 * **Style examples**
 *
 * The following example calls `style()` to set a single CSS style.
- * ```typescript
+ * ```ts
 * animate(500, style({ background: "red" }))
 * ```
 * The following example calls `keyframes()` to set a CSS style
 * to different values for successive keyframes.
- * ```typescript
+ * ```ts
 * animate(500, keyframes(
 *  [
 *   style({ background: "blue" }),
@@ -686,7 +686,7 @@ export function animate(
 * `keyframes()`, or use `animate()` calls with a delay value.
 * For example:
 *
- * ```typescript
+ * ```ts
 * group([
 *   animate("1s", style({ background: "black" })),
 *   animate("2s", style({ color: "white" }))
@@ -724,7 +724,7 @@ export function group(
 * - Steps defined by `animate()` calls apply the styling data over time
 *   as specified by the timing data.
 *
- * ```typescript
+ * ```ts
 * sequence([
 *   style({ opacity: 0 }),
 *   animate("1s", style({ opacity: 1 }))
@@ -777,7 +777,7 @@ export function sequence(
 * The following examples create animation styles that collect a set of
 * CSS property values:
 *
- * ```typescript
+ * ```ts
 * // string values for CSS properties
 * style({ background: "red", color: "blue" })
 *
@@ -788,7 +788,7 @@ export function sequence(
 * The following example uses auto-styling to allow an element to animate from
 * a height of 0 up to its full height:
 *
- * ```
+ * ```ts
 * style({ height: 0 }),
 * animate("1s", style({ height: "*" }))
 * ```
@@ -859,7 +859,7 @@ export function state(
 * when each `backgroundColor` value is applied. The color is red at the start, and changes to
 * blue when 20% of the total time has elapsed.
 *
- * ```typescript
+ * ```ts
 * // the provided offset values
 * animate("5s", keyframes([
 *   style({ backgroundColor: "red", offset: 0 }),
@@ -872,7 +872,7 @@ export function state(
 * If there are no `offset` values specified in the style entries, the offsets
 * are calculated automatically.
 *
- * ```typescript
+ * ```ts
 * animate("5s", keyframes([
 *   style({ backgroundColor: "red" }) // offset = 0
 *   style({ backgroundColor: "blue" }) // offset = 0.33
@@ -915,7 +915,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    expression bound to the trigger's element goes from `fromState` to `toState`
 *
 *    _Example:_
- *      ```typescript
+ *      ```ts
 *        transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
 *      ```
 *
@@ -923,7 +923,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
 *
 *    _Example:_
- *      ```typescript
+ *      ```ts
 *        transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
 *      ```
 *
@@ -931,7 +931,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    element enters or exists the DOM
 *
 *    _Example:_
- *      ```typescript
+ *      ```ts
 *        transition(':enter', [
 *          style({ opacity: 0 }),
 *          animate('500ms', style({ opacity: 1 }))
@@ -942,7 +942,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    the numerical expression bound to the trigger's element has increased in value or decreased
 *
 *    _Example:_
- *      ```typescript
+ *      ```ts
 *        transition(':increment', query('@counter', animateChild()))
 *      ```
 *
@@ -950,7 +950,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    should occur whenever one of the state change expressions matches
 *
 *    _Example:_
- *      ```typescript
+ *      ```ts
 *        transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
 *          style({ transform: 'scale(1)', offset: 0}),
 *          style({ transform: 'scale(1.1)', offset: 0.7}),
@@ -999,7 +999,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *   </div>
 *   ```
 *
- *   ```typescript
+ *   ```ts
 *   trigger("myAnimationTrigger", [
 *     ..., // states
 *     transition("on => off, open => closed", animate(500)),
@@ -1019,7 +1019,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 *    </div>
 *    ```
 *
- *    ```typescript
+ *    ```ts
 *    trigger("myAnimationTrigger", [
 *      ..., // states
 *      transition(
@@ -1065,7 +1065,7 @@ export function transition(
 * The following example defines a reusable animation, providing some default parameter
 * values.
 *
- * ```typescript
+ * ```ts
 * var fadeAnimation = animation([
 *   style({ opacity: '{{ start }}' }),
 *   animate('{{ time }}',
@@ -1168,7 +1168,7 @@ export function useAnimation(
 *
 * Tokens can be merged into a combined query selector string. For example:
 *
- * ```typescript
+ * ```ts
 *  query(':self, .record:enter, .record:leave, @subTrigger', [...])
 * ```
 *
@@ -1226,7 +1226,7 @@ export function useAnimation(
 * The following example queries for inner elements and animates them
 * individually using `animate()`.
 *
- * ```typescript
+ * ```angular-ts
 * @Component({
 *   selector: 'inner',
 *   template: `
@@ -1301,7 +1301,7 @@ export function query(
 *
 * Here is the component code:
 *
- * ```typescript
+ * ```ts
 * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
 * @Component({
 *   templateUrl: 'list.component.html',
@@ -1330,7 +1330,7 @@ export function query(
 *
 * Here is the animation trigger code:
 *
- * ```typescript
+ * ```ts
 * trigger('listAnimation', [
 *   transition('* => *', [ // each time the binding value changes
 *     query(':leave', [
@@ -71,7 +71,7 @@ function addBody<T>(
 *
 * ### HTTP Request Example
 *
- * ```
+ * ```ts
 *  // GET heroes whose name contains search term
 * searchHeroes(term: string): observable<Hero[]>{
 *
@@ -82,20 +82,20 @@ function addBody<T>(
 *
 * Alternatively, the parameter string can be used without invoking HttpParams
 * by directly joining to the URL.
- * ```
+ * ```ts
 * this.httpClient.request('GET', this.heroesUrl + '?' + 'name=term', {responseType:'json'});
 * ```
 *
 *
 * ### JSONP Example
- * ```
+ * ```ts
 * requestJsonp(url, callback = 'callback') {
 *  return this.httpClient.jsonp(this.heroesURL, callback);
 * }
 * ```
 *
 * ### PATCH Example
- * ```
+ * ```ts
 * // PATCH one of the heroes' name
 * patchHero (id: number, heroName: string): Observable<{}> {
 * const url = `${this.heroesUrl}/${id}`;   // PATCH api/heroes/42
@@ -25,7 +25,7 @@ export class HttpContextToken<T> {
 *
 * ### Usage Example
 *
- * ```typescript
+ * ```ts
 * // inside cache.interceptors.ts
 * export const IS_CACHE_ENABLED = new HttpContextToken<boolean>(() => false);
 *
@@ -107,7 +107,7 @@ export type HttpHandlerFn = (req: HttpRequest<unknown>) => Observable<HttpEvent<
 *
 * @usageNotes
 * Here is a noop interceptor that passes the request through without modifying it:
- * ```typescript
+ * ```ts
 * export const noopInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
 * HttpHandlerFn) => {
 *   return next(modifiedReq);
@@ -118,7 +118,7 @@ export type HttpHandlerFn = (req: HttpRequest<unknown>) => Observable<HttpEvent<
 * `next()` handler function.
 *
 * Here is a basic interceptor that adds a bearer token to the headers
- * ```typescript
+ * ```ts
 * export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
 * HttpHandlerFn) => {
 *    const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({
@@ -89,7 +89,7 @@ function makeHttpFeature<KindT extends HttpFeatureKind>(
 * Server-Side Rendering for better performance and compatibility. To enable `fetch`, add
 * `withFetch()` feature to the `provideHttpClient()` call at the root of the application:
 *
- * ```
+ * ```ts
 * provideHttpClient(withFetch());
 * ```
 *
@@ -68,7 +68,7 @@ export type HttpTransferCacheOptions = {
 *
 * When the same API endpoint is accessed via `http://internal-domain.com:8080` on the server and
 * via `https://external-domain.com` on the client, you can use the following configuration:
- * ```typescript
+ * ```ts
 * // in app.server.config.ts
 * {
 *     provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP,
@@ -42,7 +42,7 @@ interface CssClassState {
 * @ngModule CommonModule
 *
 * @usageNotes
- * ```
+ * ```html
 *     <some-element [ngClass]="'first second'">...</some-element>
 *
 *     <some-element [ngClass]="['first', 'second']">...</some-element>
@@ -54,19 +54,19 @@ import {
 * ### Syntax
 *
 * Simple
- * ```
+ * ```html
 * <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
 * ```
 *
 * With inputs
- * ```
+ * ```html
 * <ng-container *ngComponentOutlet="componentTypeExpression;
 *                                   inputs: inputsExpression;">
 * </ng-container>
 * ```
 *
 * Customized injector/content
- * ```
+ * ```html
 * <ng-container *ngComponentOutlet="componentTypeExpression;
 *                                   injector: injectorExpression;
 *                                   content: contentNodesExpression;">
@@ -74,7 +74,7 @@ import {
 * ```
 *
 * Customized NgModule reference
- * ```
+ * ```html
 * <ng-container *ngComponentOutlet="componentTypeExpression;
 *                                   ngModule: ngModuleClass;">
 * </ng-container>
@@ -81,7 +81,7 @@ export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
 * The following example shows the shorthand syntax with some options,
 * contained in an `<li>` element.
 *
- * ```
+ * ```html
 * <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
 * ```
 *
@@ -92,7 +92,7 @@ export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
 *
 * Here is the expanded version of the short-form example.
 *
- * ```
+ * ```html
 * <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
 *   <li>...</li>
 * </ng-template>
@@ -116,7 +116,7 @@ export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
 * `NgForOf` provides exported values that can be aliased to local variables.
 * For example:
 *
- *  ```
+ *  ```html
 * <li *ngFor="let user of users; index as i; first as isFirst">
 *    {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
 * </li>
@@ -31,27 +31,27 @@ import {
 *
 * Simple form with shorthand syntax:
 *
- * ```
+ * ```html
 * <div *ngIf="condition">Content to render when condition is true.</div>
 * ```
 *
 * Simple form with expanded syntax:
 *
- * ```
+ * ```html
 * <ng-template [ngIf]="condition"><div>Content to render when condition is
 * true.</div></ng-template>
 * ```
 *
 * Form with an "else" block:
 *
- * ```
+ * ```html
 * <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
 * <ng-template #elseBlock>Content to render when condition is false.</ng-template>
 * ```
 *
 * Shorthand form with "then" and "else" blocks:
 *
- * ```
+ * ```html
 * <div *ngIf="condition; then thenBlock else elseBlock"></div>
 * <ng-template #thenBlock>Content to render when condition is true.</ng-template>
 * <ng-template #elseBlock>Content to render when condition is false.</ng-template>
@@ -59,7 +59,7 @@ import {
 *
 * Form with storing the value locally:
 *
- * ```
+ * ```html
 * <div *ngIf="condition as value; else elseBlock">{{value}}</div>
 * <ng-template #elseBlock>Content to render when value is null.</ng-template>
 * ```
@@ -116,7 +116,7 @@ import {
 * for the "then" and "else" clauses. For example, consider the following shorthand statement,
 * that is meant to show a loading page while waiting for data to be loaded.
 *
- * ```
+ * ```html
 * <div class="hero-list" *ngIf="heroes else loading">
 *  ...
 * </div>
@@ -135,7 +135,7 @@ import {
 * The anchor element containing the template for the "then" clause becomes
 * the content of this unlabeled `<ng-template>` tag.
 *
- * ```
+ * ```html
 * <ng-template [ngIf]="heroes" [ngIfElse]="loading">
 *  <div class="hero-list">
 *   ...
@@ -202,7 +202,7 @@ export interface ImagePlaceholderConfig {
 *
 * Step 1: import the `NgOptimizedImage` directive.
 *
- * ```typescript
+ * ```ts
 * import { NgOptimizedImage } from '@angular/common';
 *
 * // Include it into the necessary NgModule
@@ -227,7 +227,7 @@ export interface ImagePlaceholderConfig {
 * To use an existing loader for a **third-party image service**: add the provider factory for your
 * chosen service to the `providers` array. In the example below, the Imgix loader is used:
 *
- * ```typescript
+ * ```ts
 * import {provideImgixLoader} from '@angular/common';
 *
 * // Call the function and add the result to the `providers` array:
@@ -248,7 +248,7 @@ export interface ImagePlaceholderConfig {
 * To use a **custom loader**: provide your loader function as a value for the `IMAGE_LOADER` DI
 * token.
 *
- * ```typescript
+ * ```ts
 * import {IMAGE_LOADER, ImageLoaderConfig} from '@angular/common';
 *
 * // Configure the loader using the `IMAGE_LOADER` token.
@@ -264,7 +264,7 @@ export interface ImagePlaceholderConfig {
 *
 * Step 3: update `<img>` tags in templates to use `ngSrc` instead of `src`.
 *
- * ```
+ * ```html
 * <img ngSrc="logo.png" width="200" height="100">
 * ```
 *
@@ -30,13 +30,13 @@ const INTERNAL_PRECONNECT_CHECK_BLOCKLIST = new Set(['localhost', '127.0.0.1', '
 * from the preconnect checks. It can either be a single string or an array of strings
 * to represent a group of origins, for example:
 *
- * ```typescript
+ * ```ts
 *  {provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
 * ```
 *
 * or:
 *
- * ```typescript
+ * ```ts
 *  {provide: PRECONNECT_CHECK_BLOCKLIST,
 *   useValue: ['https://your-domain-1.com', 'https://your-domain-2.com']}
 * ```
@@ -16,7 +16,7 @@ import {SwitchView} from './ng_switch';
 * @ngModule CommonModule
 *
 * @usageNotes
- * ```
+ * ```html
 * <some-element [ngPlural]="value">
 *   <ng-template ngPluralCase="=0">there is nothing</ng-template>
 *   <ng-template ngPluralCase="=1">there is one</ng-template>
@@ -90,7 +90,7 @@ export class NgPlural {
 * given expression matches the plural expression according to CLDR rules.
 *
 * @usageNotes
- * ```
+ * ```html
 * <some-element [ngPlural]="value">
 *   <ng-template ngPluralCase="=0">...</ng-template>
 *   <ng-template ngPluralCase="other">...</ng-template>
@@ -24,19 +24,19 @@ import {
 *
 * Set the font of the containing element to the result of an expression.
 *
- * ```
+ * ```html
 * <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
 * ```
 *
 * Set the width of the containing element to a pixel value returned by an expression.
 *
- * ```
+ * ```html
 * <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
 * ```
 *
 * Set a collection of style values using an expression that returns key-value pairs.
 *
- * ```
+ * ```html
 * <some-element [ngStyle]="objExp">...</some-element>
 * ```
 *
@@ -61,14 +61,14 @@ export class SwitchView {
 * Define a container element for the directive, and specify the switch expression
 * to match against as an attribute:
 *
- * ```
+ * ```html
 * <container-element [ngSwitch]="switch_expression">
 * ```
 *
 * Within the container, `*ngSwitchCase` statements specify the match expressions
 * as attributes. Include `*ngSwitchDefault` as the final case.
 *
- * ```
+ * ```html
 * <container-element [ngSwitch]="switch_expression">
 *    <some-element *ngSwitchCase="match_expression_1">...</some-element>
 * ...
@@ -80,7 +80,7 @@ export class SwitchView {
 *
 * The following example shows how to use more than one case to display the same view:
 *
- * ```
+ * ```html
 * <container-element [ngSwitch]="switch_expression">
 *   <!-- the same view can be shown in more than one case -->
 *   <some-element *ngSwitchCase="match_expression_1">...</some-element>
@@ -92,7 +92,7 @@ export class SwitchView {
 * ```
 *
 * The following example shows how cases can be nested:
- * ```
+ * ```html
 * <container-element [ngSwitch]="switch_expression">
 *       <some-element *ngSwitchCase="match_expression_1">...</some-element>
 *       <some-element *ngSwitchCase="match_expression_2">...</some-element>
@@ -177,7 +177,7 @@ export class NgSwitch {
 * Within a switch container, `*ngSwitchCase` statements specify the match expressions
 * as attributes. Include `*ngSwitchDefault` as the final case.
 *
- * ```
+ * ```html
 * <container-element [ngSwitch]="switch_expression">
 *   <some-element *ngSwitchCase="match_expression_1">...</some-element>
 *   ...
@@ -30,7 +30,7 @@ import {
 * by the local template `let` declarations.
 *
 * @usageNotes
- * ```
+ * ```html
 * <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
 * ```
 *
@@ -57,7 +57,7 @@ export abstract class LocationStrategy {
 * The following example shows how to use this token to configure the root app injector
 * with a base href value, so that the DI framework can supply the dependency anywhere in the app.
 *
- * ```typescript
+ * ```ts
 * import {NgModule} from '@angular/core';
 * import {APP_BASE_HREF} from '@angular/common';
 *
@@ -41,14 +41,14 @@ export const DATE_PIPE_DEFAULT_TIMEZONE = new InjectionToken<string>(
 * For example:
 *
 * Override the default date format by providing a value using the token:
- * ```typescript
+ * ```ts
 * providers: [
 *   {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}}
 * ]
 * ```
 *
 * Override the default timezone by providing a value using the token:
- * ```typescript
+ * ```ts
 * providers: [
 *   {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}}
 * ]
@@ -199,7 +199,7 @@ export const DATE_PIPE_DEFAULT_OPTIONS = new InjectionToken<DatePipeConfig>(
 *
 * The following component uses a date pipe to display the current date in different formats.
 *
- * ```
+ * ```angular-ts
 * @Component({
 *  selector: 'date-pipe',
 *  template: `<div>
@@ -11,7 +11,7 @@
 *
 * For example, if you had the following code:
 *
- * ```
+ * ```ts
 * function foo() {
 *   function bar () {
 *     ɵɵngDeclareDirective({...});
@@ -288,14 +288,14 @@ export interface BazelAndG3Options {
   *
   * A consumer of such a path-mapped library will write an import like:
   *
-   * ```typescript
+   * ```ts
   * import {LibModule} from 'lib/deep/path/to/module';
   * ```
   *
   * The compiler will attempt to generate imports of directives/pipes from that same module
   * specifier (the compiler does not rewrite the user's given import path, unlike View Engine).
   *
-   * ```typescript
+   * ```ts
   * import {LibDir, LibCmp, LibPipe} from 'lib/deep/path/to/module';
   * ```
   *
@@ -308,7 +308,7 @@ export enum ErrorCode {
   * The tracking expression of a `for` loop block is accessing a variable that is unavailable,
   * for example:
   *
-   * ```
+   * ```angular-html
   * <ng-template let-ref>
   *   @for (item of items; track ref) {}
   * </ng-template>
@@ -320,7 +320,7 @@ export enum ErrorCode {
   * The trigger of a `defer` block cannot access its trigger element,
   * either because it doesn't exist or it's in a different view.
   *
-   * ```
+   * ```angular-html
   * @defer (on interaction(trigger)) {...}
   *
   * <ng-template>
@@ -334,7 +334,7 @@ export enum ErrorCode {
   * A control flow node is projected at the root of a component and is preventing its direct
   * descendants from being projected, because it has more than one root node.
   *
-   * ```
+   * ```angular-html
   * <comp>
   *  @if (expr) {
   *    <div projectsIntoSlot></div>
@@ -376,7 +376,7 @@ export enum ErrorCode {
   * A two way binding in a template has an incorrect syntax,
   * parentheses outside brackets. For example:
   *
-   * ```
+   * ```html
   * <div ([foo])="bar" />
   * ```
   */
@@ -385,7 +385,7 @@ export enum ErrorCode {
  /**
   * The left side of a nullish coalescing operation is not nullable.
   *
-   * ```
+   * ```html
   * {{ foo ?? bar }}
   * ```
   * When the type of foo doesn't include `null` or `undefined`.
@@ -402,7 +402,7 @@ export enum ErrorCode {
   * A text attribute is not interpreted as a binding but likely intended to be.
   *
   * For example:
-   * ```
+   * ```html
   * <div
   *   attr.x="value"
   *   class.blue="true"
@@ -420,7 +420,7 @@ export enum ErrorCode {
   * in their statement.
   *
   * For example:
-   * ```
+   * ```html
   * <ul><li *ngFor="item of items">{{item["name"]}};</li></ul>
   * ```
   */
@@ -440,7 +440,7 @@ export enum ErrorCode {
  /**
   * The left side of an optional chain operation is not nullable.
   *
-   * ```
+   * ```html
   * {{ foo?.bar }}
   * {{ foo?.['bar'] }}
   * {{ foo?.() }}
@@ -453,7 +453,7 @@ export enum ErrorCode {
   * `ngSkipHydration` should not be a binding (it should be a static attribute).
   *
   * For example:
-   * ```
+   * ```html
   * <my-cmp [ngSkipHydration]="someTruthyVar" />
   * ```
   *
@@ -466,7 +466,7 @@ export enum ErrorCode {
   * Signal functions should be invoked when interpolated in templates.
   *
   * For example:
-   * ```
+   * ```html
   * {{ mySignal() }}
   * ```
   */
@@ -475,7 +475,7 @@ export enum ErrorCode {
  /**
   * Initializer-based APIs can only be invoked from inside of an initializer.
   *
-   * ```
+   * ```ts
   * // Allowed
   * myInput = input();
   *
@@ -491,7 +491,7 @@ export enum ErrorCode {
   * A function in an event binding is not called.
   *
   * For example:
-   * ```
+   * ```html
   * <button (click)="myFunc"></button>
   * ```
   *
@@ -504,7 +504,7 @@ export enum ErrorCode {
   * A `@let` declaration in a template isn't used.
   *
   * For example:
-   * ```
+   * ```angular-html
   * @let used = 1; <!-- Not an error -->
   * @let notUsed = 2; <!-- Error -->
   *
@@ -81,7 +81,7 @@ export function canEmitType(
 *
 * For example, consider the following code:
 *
- * ```
+ * ```ts
 * import {NgIterable} from '@angular/core';
 *
 * class NgForOf<T, U extends NgIterable<T>> {}
@@ -93,7 +93,7 @@ export function canEmitType(
 * `NgIterable` type reference to a type reference that is valid in the context in which it is
 * emitted, for example:
 *
- * ```
+ * ```ts
 * import * as i0 from '@angular/core';
 * import * as i1 from '@angular/common';
 *
@@ -16,7 +16,6 @@ This algorithm relies extensively on TypeScript's ability to rapidly type check

 To understand and check the types of various operations and structures within templates, the `typecheck` system maps them to TypeScript code, encoding them in such a way as to express the intent of the operation within the type system.

-
 TCBs are not ever emitted, nor are they referenced from any other code (they're unused code as far as TypeScript is concerned). Their _runtime_ effect is therefore unimportant. What matters is that they express to TypeScript the type relationships of directives, bindings, and other entities in the template. Type errors within TCBs translate directly to type errors in the original template.

 ### Theory
@@ -140,7 +139,7 @@ declare function ctor1<T>(inputs: {ngForOf?: Iterable<T>}): NgFor<T>;

 This type constructor can then be used to infer the instance type of a usage of `NgFor` based on provided bindings. For example, the template:

-```html=
+```html
 <div *ngFor="let user of users">...</div>
 ```

@@ -186,10 +185,10 @@ function tcb(this: SomeCmp): void {

  // _t2 is the context type for the embedded views created by the NgFor structural directive.
  var _t2: any;
-  
+
  // _t3 is the let-user variable within the embedded view.
  var _t3 = _t2.$implicit;
-  
+
  // Represents the `{{user.name}}` interpolation within the embedded view.
  '' + _t3.name;
 }
@@ -205,7 +204,7 @@ To solve this problem, the template type-checking engine allows structural direc
@Directive({selector: '[ngFor]'})
 export class NgFor<T> {
  @Input() ngForOf!: Iterable<T>;
-  
+
  static ngTemplateContextGuard<T>(dir: NgFor<T>, ctx: any): ctx is NgForContext<T> {
    return true; // implementation is not important
  }
@@ -227,12 +226,12 @@ function tcb(this: SomeCmp): void {

  // _t2 is the context type for the embedded views created by the NgFor structural directive.
  var _t2: any;
-  
+
  if (NgFor.ngTemplateContextGuard(_t1, _t2)) {
    // NgFor's ngTemplateContextGuard has narrowed the type of _t2
    // based on the type of _t1 (the NgFor directive itself).
    // Within this `if` block, _t2 is now of type NgForContext<User>.
-    
+
    // _t3 is the let-user variable within the embedded view.
    // Because _t2 is narrowed, _t3 is now of type User.
    var _t3 = _t2.$implicit;
@@ -261,10 +260,10 @@ Obviously, if `user` is potentially `null`, then this `NgIf` is intended to only
 function tcb(this: SomeCmp): void {
  // Type of the NgIf directive instance.
  var _t1: NgIf;
-  
+
  // Binding *ngIf="user != null".
  _t1.ngIf = this.user !== null;
-  
+
  // Nested template interpolation `{{user.name}}`
  '' + this.user.name;
 }
@@ -278,7 +277,7 @@ Similarly to `ngTemplateContextGuard`, the template type checking engine allows
@Directive({selector: '[ngIf]'})
 export class NgIf {
  @Input() ngIf!: boolean;
-  
+
  static ngTemplateGuard_ngIf: 'binding';
 }
 ```
@@ -289,16 +288,16 @@ The presence and type of this static property tells the template type-checking e
 function tcb(this: SomeCmp): void {
  // Type of the NgIf directive instance.
  var _t1: NgIf;
-  
+
  // Binding *ngIf="user != null".
  _t1.ngIf = this.user !== null;
-  
+
  // Guard generated due to the `ngTemplateGuard_ngIf` declaration by the NgIf directive.
  if (user !== null) {
    // Nested template interpolation `{{user.name}}`.
    // `this.user` here is appropriately narrowed to be non-nullable.
    '' + this.user.name;
-  } 
+  }
 }
 ```

@@ -360,7 +359,6 @@ var t1 = document.createElement('input');

 This ordering resolves the forward reference from the original template.

-
 ##### Tracking of `TcbOp`s

 In practice, a `TcbOp` queue is maintained as an array, where each element begins as a `TcbOp` and is later replaced with the resulting `ts.Expression` once the operation is executed. As `TcbOp`s are generated for various template structures, the index of these operations is recorded. Future dependencies on those operations can then be satisfied by looking in the queue at the appropriate index. The contents will either be a `TcbOp` which has yet to be executed, or the result of the required operation.
@@ -412,7 +410,7 @@ function tcb(this: SomeCmp): void {
  // Generated to break the cycle for `ref` - infers a placeholder
  // type for the component without using any of its input bindings.
  var t1 = ctor1(null!);
-  
+
  // Infer the real type of the component using the `t1` placeholder
  // type for `ref`.
  var t2 = ctor1({in: t1.value});
@@ -479,11 +477,11 @@ TypeScript unfortunately cannot consume sourcemaps, only produce them. Therefore

 Not all template errors will be caught by TypeScript from generated TCB code. The template type checking engine may also detect errors during the creation of the TCB itself. Several classes of errors are caught this way:

-* DOM schema errors, like elements that don't exist or attributes that aren't correct.
-* Missing pipes.
-* Missing `#ref` targets.
-* Duplicate `let-variable`s.
-* Attempts to write to a `let-variable`.
+- DOM schema errors, like elements that don't exist or attributes that aren't correct.
+- Missing pipes.
+- Missing `#ref` targets.
+- Duplicate `let-variable`s.
+- Attempts to write to a `let-variable`.

 These errors manifest as "generation diagnostics", diagnostics which are produced during TCB generation, before TCB code is fed to TypeScript. They're ultimately reported together with any converted TCB diagnostics, but are tracked separately by the type checking system.

@@ -534,7 +532,7 @@ interface PrivateInterface {
@Directive({selector: '[dir]'})
 export class MyDir<T extends PrivateInterface> {
  @Input() value: T;
-  
+
  static ngTypeCtor<T extends PrivateInterface>(inputs: {value?: T}): MyDir<T> { return null!; }
 }
 ```
@@ -578,7 +576,6 @@ Each TCB is therefore generated in the context of an `Environment`, which loosel

 During TCB generation, the `Environment` is used to obtain references to imported types, type constructors, and other shared structures.

-
 #### `TypeCheckingConfig`

 `Environment` also carries the `TypeCheckingConfig`, an options interface which controls the specifics of TCB generation. Through the `TypeCheckingConfig`, a consumer can enable or disable various kinds of strictness checks and other TCB operations.
@@ -587,9 +584,9 @@ During TCB generation, the `Environment` is used to obtain references to importe

 The main interface used by consumers to interact with the template type checking system is the `TemplateTypeChecker`. Methods on this interface allow for various operations related to TCBs, such as:

-* Generation of diagnostics.
-* Retrieving `Symbol`s (the template equivalent to TypeScript's `ts.Symbol`) for template nodes.
-* Retrieving TCB locations suitable for autocompletion operations.
+- Generation of diagnostics.
+- Retrieving `Symbol`s (the template equivalent to TypeScript's `ts.Symbol`) for template nodes.
+- Retrieving TCB locations suitable for autocompletion operations.

 ### Symbols

@@ -641,4 +638,4 @@ Creating such a `ts.Program` is not the responsibility of the `TemplateTypeCheck

 As a convenience, the type-checking system provides an implementation of this abstraction, the `ReusedProgramStrategy`, which can be used by consumers that manage `ts.Program`s via TypeScript's `ts.createProgram` API. The main compiler uses this strategy to support template type checking.

-`ts.Program`s can also be created via Language Service APIs, which would require a different strategy implementation.
+`ts.Program`s can also be created via Language Service APIs, which would require a different strategy implementation.
@@ -673,7 +673,7 @@ class TcbGenericDirectiveTypeWithAnyParamsOp extends TcbDirectiveTypeOpBase {
 * The initializer for the variable is the variable expression for the directive, template, or
 * element the ref refers to. When the reference is used in the template, those TCB statements will
 * access this variable as well. For example:
- * ```
+ * ```ts
 * var _t1 = document.createElement('div');
 * var _t2 = _t1;
 * _t2.value
@@ -249,7 +249,7 @@ export function requiresInlineTypeCtor(
 * fails. This can happen when inferring a complex type from 'any'. For example, if `NgFor`'s
 * inference is done with the TCB code:
 *
- * ```
+ * ```ts
 * class NgFor<T> {
 *   ngForOf: T[];
 * }
@@ -260,14 +260,14 @@ export function requiresInlineTypeCtor(
 *
 * An invocation looks like:
 *
- * ```
+ * ```ts
 * var _t1 = ctor({ngForOf: [1, 2], ngForTrackBy: null as any, ngForTemplate: null as any});
 * ```
 *
 * This correctly infers the type `NgFor<number>` for `_t1`, since `T` is inferred from the
 * assignment of type `number[]` to `ngForOf`'s type `T[]`. However, if `any` is passed instead:
 *
- * ```
+ * ```ts
 * var _t2 = ctor({ngForOf: [1, 2] as any, ngForTrackBy: null as any, ngForTemplate: null as
 * any});
 * ```
@@ -278,7 +278,7 @@ export function requiresInlineTypeCtor(
 * Adding a default type to the generic declaration in the constructor solves this problem, as
 * the default type will be used in the event that inference fails.
 *
- * ```
+ * ```ts
 * declare function ctor<T = any>(o: Pick<NgFor<T>, 'ngForOf'>): NgFor<T>;
 *
 * var _t3 = ctor({ngForOf: [1, 2] as any});
@@ -15,7 +15,7 @@
 *  - packages/core/src/compiler/compiler_facade_interface.ts     (replica)
 *
 * Please ensure that the two files are in sync using this command:
- * ```
+ * ```shell
 * cp packages/compiler/src/compiler_facade_interface.ts \
 *    packages/core/src/compiler/compiler_facade_interface.ts
 * ```
@@ -28,7 +28,7 @@ const PLURAL_CASES: string[] = ['zero', 'one', 'two', 'few', 'many', 'other'];
 *
 * will be expanded into
 *
- * ```
+ * ```html
 * <ng-container [ngPlural]="messages.length">
 *   <ng-template ngPluralCase="=0">zero</ng-template>
 *   <ng-template ngPluralCase="=1">one</ng-template>
@@ -64,7 +64,7 @@ function internalCompileClassMetadata(metadata: R3ClassMetadata): o.InvokeFuncti
 * loads dependencies from `@defer` blocks.
 *
 * Generates a call like this:
- * ```
+ * ```ts
 * setClassMetadataAsync(type, () => [
 *   import('./cmp-a').then(m => m.CmpA);
 *   import('./cmp-b').then(m => m.CmpB);
@@ -157,7 +157,7 @@ export function convertFromMaybeForwardRefExpression({
 /**
 * Generate an expression that has the given `expr` wrapped in the following form:
 *
- * ```
+ * ```ts
 * forwardRef(() => expr)
 * ```
 */
@@ -25,7 +25,7 @@ const GOOG_GET_MSG = 'goog.getMsg';
 *
 * Generates:
 *
- * ```typescript
+ * ```ts
 * const MSG_FOO = goog.getMsg(
 *   // Message template.
 *   'Sent from {$interpolation} to {$startTagSpan}{$interpolation_1}{$closeTagSpan}.',
@@ -131,7 +131,7 @@ const queryAdvancePlaceholder = Symbol('queryAdvancePlaceholder');
 *
 *   --> will turn into
 *
- * ```
+ * ```ts
 *   bla();
 *   queryAdvance(2);
 *   bla();
@@ -56,14 +56,14 @@ const MAX_CHAIN_LENGTH = 256;
 *
 * For example, two `elementStart` operations in sequence:
 *
- * ```typescript
+ * ```ts
 * elementStart(0, 'div');
 * elementStart(1, 'span');
 * ```
 *
 * Can be called as a chain instead:
 *
- * ```typescript
+ * ```ts
 * elementStart(0, 'div')(1, 'span');
 * ```
 */
@@ -319,7 +319,7 @@ function addSubMessageParams(
 /**
 * Generate statements that define a given translation message.
 *
- * ```
+ * ```ts
 * var I18N_1;
 * if (typeof ngI18nClosureMode !== undefined && ngI18nClosureMode) {
 *     var MSG_EXTERNAL_XXX = goog.getMsg(
@@ -375,7 +375,7 @@ function getTranslationDeclStmts(
 * Create the expression that will be used to guard the closure mode block
 * It is equivalent to:
 *
- * ```
+ * ```ts
 * typeof ngI18nClosureMode !== undefined && ngI18nClosureMode
 * ```
 */
@@ -19,7 +19,7 @@ import * as compiler from '../src/compiler_facade_interface';
 *  - packages/core/src/render3/jit/compiler_facade_interface.ts     (copy)
 *
 * Please ensure that the two files are in sync using this command:
- * ```
+ * ```shell
 * cp packages/compiler/src/compiler_facade_interface.ts \
 *    packages/core/src/render3/jit/compiler_facade_interface.ts
 * ```
@@ -70,7 +70,7 @@ type ReferenceMetadata = Map<
 *
 * E.g. consider the following snippet:
 *
- * ```
+ * ```ts
 * someMethod() {
 *   if (this.bla) {
 *     this.bla.charAt(0);
@@ -16,7 +16,7 @@ import {checkInheritanceOfKnownFields} from './problematic_patterns/check_inheri
 * Phase that propagates incompatibilities to derived classes or
 * base classes. For example, consider:
 *
- * ```
+ * ```ts
 * class Base {
 *   bla = true;
 * }
@@ -25,7 +25,7 @@ export interface InheritanceTracker<D extends ClassFieldDescriptor> {
 * Phase that propagates incompatibilities to derived classes or
 * base classes. For example, consider:
 *
- * ```
+ * ```ts
 * class Base {
 *   bla = true;
 * }
@@ -23,7 +23,7 @@ import {ReferenceMigrationHost} from './reference_migration_host';
 * The phase takes care of control flow analysis and generates temporary variables
 * where needed to ensure narrowing continues to work. E.g.
 *
- * ```
+ * ```ts
 * someMethod() {
 *   if (this.input) {
 *     this.input.charAt(0);
@@ -33,7 +33,7 @@ import {ReferenceMigrationHost} from './reference_migration_host';
 *
 * will be transformed into:
 *
- * ```
+ * ```ts
 * someMethod() {
 *   const input_1 = this.input();
 *   if (input_1) {
@@ -21,7 +21,7 @@ interface CombineCandidate {
 * Finds class property declarations without initializers whose constructor-based initialization
 * can be inlined into the declaration spot after migrating to `inject`. For example:
 *
- * ```
+ * ```ts
 * private foo: number;
 *
 * constructor(private service: MyService) {
@@ -103,7 +103,7 @@ export function findUninitializedPropertiesToCombine(
 * The internal-specific migration will combine such properties which will result in a compilation
 * error, for example:
 *
- * ```
+ * ```ts
 * class MyClass {
 *   foo: Foo;
 *   bar: Bar;
@@ -117,7 +117,7 @@ export function findUninitializedPropertiesToCombine(
 *
 * Will become:
 *
- * ```
+ * ```ts
 * class MyClass {
 *   foo: Foo = this.bar.getFoo();
 *   bar: Bar = inject(Bar);
@@ -179,7 +179,7 @@ export function shouldCombineInInitializationOrder(
 /**
 * Finds the expressions from the constructor that initialize class members, for example:
 *
- * ```
+ * ```ts
 * private foo: number;
 *
 * constructor() {
@@ -49,7 +49,7 @@ export function getImportOfIdentifier(
 * Gets a top-level import specifier with a specific name that is imported from a particular module.
 * E.g. given a file that looks like:
 *
- * ```
+ * ```ts
 * import { Component, Directive } from '@angular/core';
 * import { Foo } from './foo';
 * ```
@@ -45,7 +45,7 @@ import {isPromise, isSubscribable} from '../util/lang';
 * The following example illustrates how to configure a multi-provider using `APP_INITIALIZER` token
 * and a function returning a promise.
 * ### Example with NgModule-based application
- * ```
+ * ```ts
 *  function initializeApp(): Promise<any> {
 *    const http = inject(HttpClient);
 *    return firstValueFrom(
@@ -69,7 +69,7 @@ import {isPromise, isSubscribable} from '../util/lang';
 * ```
 *
 * ### Example with standalone application
- * ```
+ * ```ts
 * function initializeApp() {
 *   const http = inject(HttpClient);
 *   return firstValueFrom(
@@ -99,7 +99,7 @@ import {isPromise, isSubscribable} from '../util/lang';
 * through DI.
 *
 * ### Example with NgModule-based application
- * ```
+ * ```ts
 * function initializeApp() {
 *   const http = inject(HttpClient);
 *   return firstValueFrom(
@@ -123,7 +123,7 @@ import {isPromise, isSubscribable} from '../util/lang';
 * ```
 *
 * ### Example with standalone application
- * ```
+ * ```ts
 * function initializeApp() {
 *   const http = inject(HttpClient);
 *   return firstValueFrom(
@@ -171,7 +171,7 @@ export const APP_INITIALIZER = new InjectionToken<
 * @usageNotes
 * The following example illustrates how to configure an initialization function using
 * `provideAppInitializer()`
- * ```
+ * ```ts
 * bootstrapApplication(App, {
 *   providers: [
 *     provideAppInitializer(() => {
@@ -224,7 +224,7 @@ export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
 * (here incrementing a counter, using RxJS `interval`),
 * and at the same time subscribe to `isStable`.
 *
- * ```
+ * ```ts
 * constructor(appRef: ApplicationRef) {
 *   appRef.isStable.pipe(
 *      filter(stable => stable)
@@ -239,7 +239,7 @@ export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
 * you have to wait for the application to be stable
 * before starting your polling process.
 *
- * ```
+ * ```ts
 * constructor(appRef: ApplicationRef) {
 *   appRef.isStable.pipe(
 *     first(stable => stable),
@@ -259,7 +259,7 @@ export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
 * you update a field of your component
 * and display it in its template.
 *
- * ```
+ * ```ts
 * constructor(appRef: ApplicationRef) {
 *   appRef.isStable.pipe(
 *     first(stable => stable),
@@ -273,7 +273,7 @@ export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
 *
 * You'll have to manually trigger the change detection to update the template.
 *
- * ```
+ * ```ts
 * constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) {
 *   appRef.isStable.pipe(
 *     first(stable => stable),
@@ -287,7 +287,7 @@ export function optionsReducer<T extends Object>(dst: T, objs: T | T[]): T {
 *
 * Or make the subscription callback run inside the zone.
 *
- * ```
+ * ```ts
 * constructor(appRef: ApplicationRef, zone: NgZone) {
 *   appRef.isStable.pipe(
 *     first(stable => stable),
@@ -18,7 +18,7 @@ import {getDocument} from '../render3/interfaces/document';
 * (for example, using `bootstrapApplication` calls). In this case, ensure that those applications
 * have different `APP_ID` value setup. For example:
 *
- * ```
+ * ```ts
 * bootstrapApplication(ComponentA, {
 *   providers: [
 *     { provide: APP_ID, useValue: 'app-a' },
@@ -118,7 +118,7 @@ export interface InputFunction {
 * @usageNotes
 * To use signal-based inputs, import `input` from `@angular/core`.
 *
- * ```
+ * ```ts
 * import {input} from '@angular/core`;
 * ```
 *
@@ -68,7 +68,7 @@ export interface ModelFunction {
 *
 * To use `model()`, import the function from `@angular/core`.
 *
- * ```
+ * ```ts
 * import {model} from '@angular/core`;
 * ```
 *
@@ -95,7 +95,7 @@ export interface ViewChildFunction {
 * Create a child query in your component by declaring a
 * class field and initializing it with the `viewChild()` function.
 *
- * ```ts
+ * ```angular-ts
 * @Component({template: '<div #el></div><my-component #cmp />'})
 * export class TestComponent {
 *   divEl = viewChild<ElementRef>('el');                   // Signal<ElementRef|undefined>
@@ -137,7 +137,7 @@ export function internalProvideZoneChangeDetection({
 * `BootstrapOptions` instead.
 *
 * @usageNotes
- * ```typescript
+ * ```ts
 * bootstrapApplication(MyApp, {providers: [
 *   provideZoneChangeDetection({eventCoalescing: true}),
 * ]});
@@ -364,7 +364,7 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
 * - registering a render hook (templates are only refreshed if render hooks do one of the above)
 *
 * @usageNotes
- * ```typescript
+ * ```ts
 * bootstrapApplication(MyApp, {providers: [
 *   provideExperimentalZonelessChangeDetection(),
 * ]});
@@ -15,7 +15,7 @@
 *  - packages/core/src/compiler/compiler_facade_interface.ts     (replica)
 *
 * Please ensure that the two files are in sync using this command:
- * ```
+ * ```shell
 * cp packages/compiler/src/compiler_facade_interface.ts \
 *    packages/core/src/compiler/compiler_facade_interface.ts
 * ```
@@ -39,7 +39,7 @@ const __forward_ref__ = getClosureSafeProperty({__forward_ref__: getClosureSafeP
 * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref'}
 *
 * ### Circular standalone reference import example
- * ```ts
+ * ```angular-ts
 * @Component({
 *   standalone: true,
 *   imports: [ChildComponent],
@@ -13,7 +13,7 @@ import {ɵɵinjectAttribute} from '../render3/instructions/di_attr';
 *
 * @usageNotes
 * ### Injecting an attribute that is known to exist
- * ```typescript
+ * ```ts
 * @Directive()
 * class MyDir {
 *   attr: string = inject(new HostAttributeToken('some-attr'));
@@ -21,7 +21,7 @@ import {ɵɵinjectAttribute} from '../render3/instructions/di_attr';
 * ```
 *
 * ### Optionally injecting an attribute
- * ```typescript
+ * ```ts
 * @Directive()
 * class MyDir {
 *   attr: string | null = inject(new HostAttributeToken('some-attr'), {optional: true});
@@ -18,7 +18,7 @@ import {InjectFlags} from './interface/injector';
 *
 * @usageNotes
 * ### Injecting a tag name that is known to exist
- * ```typescript
+ * ```ts
 * @Directive()
 * class MyDir {
 *   tagName: string = inject(HOST_TAG_NAME);
@@ -26,7 +26,7 @@ import {InjectFlags} from './interface/injector';
 * ```
 *
 * ### Optionally injecting a tag name
- * ```typescript
+ * ```ts
 * @Directive()
 * class MyDir {
 *   tagName: string | null = inject(HOST_TAG_NAME, {optional: true});
@@ -223,7 +223,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s
 * In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a
 * field initializer:
 *
- * ```typescript
+ * ```ts
 * @Injectable({providedIn: 'root'})
 * export class Car {
 *   radio: Radio|undefined;
@@ -239,7 +239,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s
 *
 * It is also legal to call `inject` from a provider's factory:
 *
- * ```typescript
+ * ```ts
 * providers: [
 *   {provide: Car, useFactory: () => {
 *     // OK: a class factory
@@ -253,7 +253,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s
 * notably, calls to `inject()` are disallowed after a class instance was created, in methods
 * (including lifecycle hooks):
 *
- * ```typescript
+ * ```ts
 * @Component({ ... })
 * export class CarComponent {
 *   ngOnInit() {
@@ -63,7 +63,7 @@ export function makeEnvironmentProviders(
 * @usageNotes
 * The following example illustrates how to configure an initialization function using
 * `provideEnvironmentInitializer()`
- * ```
+ * ```ts
 * createEnvironmentInjector(
 *   [
 *     provideEnvironmentInitializer(() => {
@@ -115,7 +115,7 @@ type WalkProviderTreeVisitor = (
 * @usageNotes
 * The results of the `importProvidersFrom` call can be used in the `bootstrapApplication` call:
 *
- * ```typescript
+ * ```ts
 * await bootstrapApplication(RootComponent, {
 *   providers: [
 *     importProvidersFrom(NgModuleOne, NgModuleTwo)
@@ -126,7 +126,7 @@ type WalkProviderTreeVisitor = (
 * You can also use the `importProvidersFrom` results in the `providers` field of a route, when a
 * standalone component is used:
 *
- * ```typescript
+ * ```ts
 * export const ROUTES: Route[] = [
 *   {
 *     path: 'foo',
@@ -19,7 +19,7 @@ import {NgZone} from './zone';
 * @usageNotes
 * ### Example
 *
- * ```
+ * ```ts
 * class MyErrorHandler implements ErrorHandler {
 *   handleError(error) {
 *     // do something with the exception
@@ -144,7 +144,7 @@ export const enum RuntimeErrorCode {
 * Formats and outputs the error message in a consistent way.
 *
 * Example:
- * ```
+ * ```ts
 *  throw new RuntimeError(
 *    RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
 *    ngDevMode && 'Injector has already been destroyed.');
@@ -30,7 +30,7 @@ import {PendingTasksInternal} from './pending_tasks';
 * that create event emitters. When the title is clicked, the emitter
 * emits an open or close event to toggle the current visibility state.
 *
- * ```html
+ * ```angular-ts
 * @Component({
 *   selector: 'zippy',
 *   template: `
@@ -55,7 +55,7 @@ export function getGlobalLocale(): string {
 * @usageNotes
 * ### Example
 *
- * ```typescript
+ * ```ts
 * import { LOCALE_ID } from '@angular/core';
 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 * import { AppModule } from './app/app.module';
@@ -100,7 +100,7 @@ export const LOCALE_ID: InjectionToken<string> = new InjectionToken(ngDevMode ?
 * @usageNotes
 * ### Example
 *
- * ```typescript
+ * ```ts
 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 * import { AppModule } from './app/app.module';
 *
@@ -128,7 +128,7 @@ export const DEFAULT_CURRENCY_CODE = new InjectionToken<string>(
 * @usageNotes
 * ### Example
 *
- * ```typescript
+ * ```ts
 * import { TRANSLATIONS } from '@angular/core';
 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 * import { AppModule } from './app/app.module';
@@ -154,7 +154,7 @@ export const TRANSLATIONS = new InjectionToken<string>(ngDevMode ? 'Translations
 * @usageNotes
 * ### Example
 *
- * ```typescript
+ * ```ts
 * import { TRANSLATIONS_FORMAT } from '@angular/core';
 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 * import { AppModule } from './app/app.module';
@@ -181,7 +181,7 @@ export const TRANSLATIONS_FORMAT = new InjectionToken<string>(
 *
 * @usageNotes
 * ### Example
- * ```typescript
+ * ```ts
 * import { MissingTranslationStrategy } from '@angular/core';
 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 * import { AppModule } from './app/app.module';
@@ -43,18 +43,18 @@ export interface Type<T> extends Function {
 *
 * USAGE:
 * Given:
- * ```
+ * ```ts
 * interface Person {readonly name: string}
 * ```
 *
 * We would like to get a read/write version of `Person`.
- * ```
+ * ```ts
 * const WritablePerson = Writable<Person>;
 * ```
 *
 * The result is that you can do:
 *
- * ```
+ * ```ts
 * const readonlyPerson: Person = {name: 'Marry'};
 * readonlyPerson.name = 'John'; // TypeError
 * (readonlyPerson as WritablePerson).name = 'John'; // OK
@@ -31,7 +31,7 @@ export abstract class DestroyRef {
   *
   * @usageNotes
   * ### Example
-   * ```typescript
+   * ```ts
   * const destroyRef = inject(DestroyRef);
   *
   * // register a destroy callback
@@ -34,7 +34,7 @@ function symbolIterator<T>(this: QueryList<T>): Iterator<T> {
 *
 * @usageNotes
 * ### Example
- * ```typescript
+ * ```ts
 * @Component({...})
 * class Container {
 *   @ViewChildren(Item) items:QueryList<Item>;
@@ -101,7 +101,7 @@ import {EmbeddedViewRef, ViewRef} from './view_ref';
 * Note: the example uses standalone components, but the function can also be used for
 * non-standalone components (declared in an NgModule) as well.
 *
- * ```typescript
+ * ```angular-ts
 * @Component({
 *   standalone: true,
 *   selector: 'dynamic',
@@ -53,7 +53,7 @@ export abstract class ViewRef extends ChangeDetectorRef {
 * The following template breaks down into two separate `TemplateRef` instances,
 * an outer one and an inner one.
 *
- * ```
+ * ```html
 * Count: {{items.length}}
 * <ul>
 *   <li *ngFor="let  item of items">{{item}}</li>
@@ -62,7 +62,7 @@ export abstract class ViewRef extends ChangeDetectorRef {
 *
 * This is the outer `TemplateRef`:
 *
- * ```
+ * ```html
 * Count: {{items.length}}
 * <ul>
 *   <ng-template ngFor let-item [ngForOf]="items"></ng-template>
@@ -71,13 +71,13 @@ export abstract class ViewRef extends ChangeDetectorRef {
 *
 * This is the inner `TemplateRef`:
 *
- * ```
+ * ```html
 *   <li>{{item}}</li>
 * ```
 *
 * The outer and inner `TemplateRef` instances are assembled into views as follows:
 *
- * ```
+ * ```html
 * <!-- ViewRef: outer-0 -->
 * Count: 2
 * <ul>
@@ -164,7 +164,7 @@ export interface Directive {
   *
   * The following example creates a component with two data-bound properties.
   *
-   * ```typescript
+   * ```ts
   * @Component({
   *   selector: 'bank-account',
   *   inputs: ['bankName', {name: 'id', alias: 'account-id'}],
@@ -204,7 +204,7 @@ export interface Directive {
   *
   * @usageNotes
   *
-   * ```typescript
+   * ```ts
   * @Component({
   *   selector: 'child-dir',
   *   outputs: [ 'bankNameChange' ],
@@ -714,7 +714,7 @@ export interface PipeDecorator {
   * For example, if the name is "myPipe", use a template binding expression
   * such as the following:
   *
-   * ```
+   * ```html
   * {{ exp | myPipe }}
   * ```
   *
@@ -801,7 +801,7 @@ export interface InputDecorator {
   * The following example creates a component with two input properties,
   * one of which is given a special binding name.
   *
-   * ```typescript
+   * ```ts
   * import { Component, Input, numberAttribute, booleanAttribute } from '@angular/core';
   * @Component({
   *   selector: 'bank-account',
@@ -953,7 +953,7 @@ export interface HostBindingDecorator {
   * The following example creates a directive that sets the `valid` and `invalid`
   * class, a style color, and an id on the DOM element that has an `ngModel` directive on it.
   *
-   * ```typescript
+   * ```ts
   * @Directive({selector: '[ngModel]'})
   * class NgModelStatus {
   *   constructor(public control: NgModel) {}
@@ -21,7 +21,7 @@ import {ApplicationRef} from '../application/application_ref';
 * The example below uses `ApplicationRef.bootstrap()` to render the
 * `AppComponent` on the page.
 *
- * ```typescript
+ * ```ts
 * class AppModule implements DoBootstrap {
 *   ngDoBootstrap(appRef: ApplicationRef) {
 *     appRef.bootstrap(AppComponent); // Or some other component
@@ -14,7 +14,7 @@ import {Component} from './directives';
 * Used to resolve resource URLs on `@Component` when used with JIT compilation.
 *
 * Example:
- * ```
+ * ```ts
 * @Component({
 *   selector: 'my-comp',
 *   templateUrl: 'my-comp.html', // This requires asynchronous resolution
@@ -74,7 +74,7 @@ export class PendingTasksInternal implements OnDestroy {
 * - tests might want to delay assertions until the application becomes stable;
 *
 * @usageNotes
- * ```typescript
+ * ```ts
 * const pendingTasks = inject(PendingTasks);
 * const taskCleanup = pendingTasks.add();
 * // do work that should block application's stability and then:
@@ -92,7 +92,7 @@ export class PlatformRef {
   * @usageNotes
   * ### Simple Example
   *
-   * ```typescript
+   * ```ts
   * @NgModule({
   *   imports: [BrowserModule]
   * })
@@ -25,19 +25,19 @@ import {PlatformReflectionCapabilities} from './platform_reflection_capabilities
 * it intends to capture the pattern where existing constructors have been downleveled from
 * ES2015 to ES5 using TypeScript w/ downlevel iteration. e.g.
 *
- * ```
+ * ```ts
 *   function MyClass() {
 *     var _this = _super.apply(this, arguments) || this;
 * ```
 *
 * downleveled to ES5 with `downlevelIteration` for TypeScript < 4.2:
- * ```
+ * ```ts
 *   function MyClass() {
 *     var _this = _super.apply(this, __spread(arguments)) || this;
 * ```
 *
 * or downleveled to ES5 with `downlevelIteration` for TypeScript >= 4.2:
- * ```
+ * ```ts
 *   function MyClass() {
 *     var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
 * ```
@@ -125,7 +125,7 @@ export interface AfterRenderOptions {
 * Use `afterRender` to read or write the DOM after each render.
 *
 * ### Example
- * ```ts
+ * ```angular-ts
 * @Component({
 *   selector: 'my-cmp',
 *   template: `<span #content>{{ ... }}</span>`,
@@ -187,7 +187,7 @@ export function afterRender<E = never, W = never, M = never>(
 * Use `afterRender` to read or write the DOM after each render.
 *
 * ### Example
- * ```ts
+ * ```angular-ts
 * @Component({
 *   selector: 'my-cmp',
 *   template: `<span #content>{{ ... }}</span>`,
@@ -297,7 +297,7 @@ export function afterRender(
 * for example to initialize a non-Angular library.
 *
 * ### Example
- * ```ts
+ * ```angular-ts
 * @Component({
 *   selector: 'my-chart-cmp',
 *   template: `<div #chart>{{ ... }}</div>`,
@@ -360,7 +360,7 @@ export function afterNextRender<E = never, W = never, M = never>(
 * for example to initialize a non-Angular library.
 *
 * ### Example
- * ```ts
+ * ```angular-ts
 * @Component({
 *   selector: 'my-chart-cmp',
 *   template: `<div #chart>{{ ... }}</div>`,
@@ -27,7 +27,7 @@ import {assertComponentDef} from './errors';
 * Note: the example uses standalone components, but the function can also be used for
 * non-standalone components (declared in an NgModule) as well.
 *
- * ```typescript
+ * ```angular-ts
 * @Component({
 *   standalone: true,
 *   template: `Hello {{ name }}!`
@@ -150,7 +150,7 @@ export interface ComponentMirror<C> {
 * The example below demonstrates how to use the function and how the fields
 * of the returned object map to the component metadata.
 *
- * ```typescript
+ * ```angular-ts
 * @Component({
 *   standalone: true,
 *   selector: 'foo-component',
@@ -685,7 +685,7 @@ function projectNodes(
 *
 * Example:
 *
- * ```
+ * ```ts
 * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]});
 * ```
 */
@@ -46,7 +46,7 @@ import {StandaloneService} from './standalone_service';
 * Map of inputs for a given directive/component.
 *
 * Given:
- * ```
+ * ```ts
 * class MyComponent {
 *   @Input()
 *   publicInput1: string;
@@ -62,7 +62,7 @@ import {StandaloneService} from './standalone_service';
 * ```
 *
 * is described as:
- * ```
+ * ```ts
 * {
 *   publicInput1: 'publicInput1',
 *   declaredInput2: [InputFlags.None, 'declaredInput2', 'publicInput2'],
@@ -77,7 +77,7 @@ import {StandaloneService} from './standalone_service';
 * ```
 *
 * Which the minifier may translate to:
- * ```
+ * ```ts
 * {
 *   minifiedPublicInput1: 'publicInput1',
 *   minifiedDeclaredInput2: [InputFlags.None, 'publicInput2', 'declaredInput2'],
@@ -328,7 +328,7 @@ interface ComponentDefinition<T> extends Omit<DirectiveDefinition<T>, 'features'
 *
 *
 * # Example
- * ```
+ * ```ts
 * class MyComponent {
 *   // Generated by Angular Template Compiler
 *   // [Symbol] syntax will not be supported by TypeScript until v2.7
@@ -453,7 +453,7 @@ export function ɵɵdefineNgModule<T>(def: {
 *
 * e.g. for
 *
- * ```
+ * ```ts
 * class Comp {
 *   @Input()
 *   propName1: string;
@@ -467,7 +467,7 @@ export function ɵɵdefineNgModule<T>(def: {
 *
 * will be serialized as
 *
- * ```
+ * ```ts
 * {
 *   propName1: 'propName1',
 *   declaredPropName2: ['publicName2', 'declaredPropName2'],
@@ -477,7 +477,7 @@ export function ɵɵdefineNgModule<T>(def: {
 *
 * which is than translated by the minifier as:
 *
- * ```
+ * ```ts
 * {
 *   minifiedPropName1: 'propName1',
 *   minifiedPropName2: ['publicName2', 'declaredPropName2'],
@@ -487,7 +487,7 @@ export function ɵɵdefineNgModule<T>(def: {
 *
 * becomes: (public name => minifiedName + isSignal if needed)
 *
- * ```
+ * ```ts
 * {
 *  'propName1': 'minifiedPropName1',
 *  'publicName2': 'minifiedPropName2',
@@ -498,7 +498,7 @@ export function ɵɵdefineNgModule<T>(def: {
 * Optionally the function can take `declaredInputs` which will result
 * in: (public name => declared name)
 *
- * ```
+ * ```ts
 * {
 *  'propName1': 'propName1',
 *  'publicName2': 'declaredPropName2',
@@ -583,7 +583,7 @@ export function ɵɵdefineDirective<T>(
 * Create a pipe definition object.
 *
 * # Example
- * ```
+ * ```ts
 * class MyPipe implements PipeTransform {
 *   // Generated by Angular Template Compiler
 *   static ɵpipe = definePipe({
@@ -82,7 +82,7 @@ import {stringifyForError} from './util/stringify_utils';
 *
 * Example:
 *
- * ```
+ * ```ts
 * @Injectable()
 * class MyService {
 *   constructor(public value: String) {}
@@ -315,19 +315,19 @@ export function diPublicInInjector(
 *
 * # Example
 * Given:
- * ```
+ * ```ts
 * @Component(...)
 * class MyComponent {
 *   constructor(@Attribute('title') title: string) { ... }
 * }
 * ```
 * When instantiated with
- * ```
+ * ```html
 * <my-component title="Hello"></my-component>
 * ```
 *
 * Then factory method generated is:
- * ```
+ * ```ts
 * MyComponent.ɵcmp = defineComponent({
 *   factory: () => new MyComponent(injectAttribute('title'))
 *   ...
@@ -26,7 +26,7 @@ import {DirectiveDef, DirectiveDefFeature} from '../interfaces/definition';
 *
 * Example usage:
 *
- * ```
+ * ```ts
 * static ɵcmp = defineComponent({
 *   ...
 *   inputs: {name: 'publicName'},
@@ -531,7 +531,7 @@ function removeInnerTemplateTranslation(message: string): string {
 * translated message can span multiple templates.
 *
 * Example:
- * ```
+ * ```html
 * <div i18n>Translate <span *ngIf>me</span>!</div>
 * ```
 *
@@ -48,7 +48,7 @@ export function renderComponent(hostLView: LView, componentHostIdx: number) {
 * will be skipped. However, consider this case of two components side-by-side:
 *
 * App template:
- * ```
+ * ```html
 * <comp></comp>
 * <comp></comp>
 * ```
@@ -473,7 +473,7 @@ function getTemplateHeadTStylingKey(
 * method allows us to update the first template instruction `TStylingKey` with a new value.
 *
 * Assume:
- * ```
+ * ```angular-ts
 * <div my-dir style="color: red" [style.color]="tmplExp"></div>
 *
 * @Directive({
@@ -486,7 +486,7 @@ function getTemplateHeadTStylingKey(
 * ```
 *
 * when `[style.color]="tmplExp"` executes it creates this data structure.
- * ```
+ * ```ts
 *  ['', 'color', 'color', 'red', 'width', '100px'],
 * ```
 *
@@ -496,14 +496,14 @@ function getTemplateHeadTStylingKey(
 * `color' and 'width`)
 *
 * When `'[style.color]': 'dirExp',` executes we need to insert a new data into the linked list.
- * ```
+ * ```ts
 *  ['', 'color', 'width', '100px'],  // newly inserted
 *  ['', 'color', 'color', 'red', 'width', '100px'], // this is wrong
 * ```
 *
 * Notice that the template statics is now wrong as it incorrectly contains `width` so we need to
 * update it like so:
- * ```
+ * ```ts
 *  ['', 'color', 'width', '100px'],
 *  ['', 'color', 'color', 'red'],    // UPDATE
 * ```
@@ -34,7 +34,7 @@ export interface I18nRemoveOpCodes extends Array<number> {
 * 3322 2222 2222 1111 1111 1110 0000 0000
 * 1098 7654 3210 9876 5432 1098 7654 3210
 *
- * ```
+ * ```ts
 * var parent = lView[opCode >>> SHIFT_PARENT];
 * var refNode = lView[((opCode & MASK_REF) >>> SHIFT_REF)];
 * var instruction = opCode & MASK_OPCODE;
@@ -199,7 +199,7 @@ export interface I18nDebug {
 * The number is shifted and encoded according to `I18nCreateOpCode`
 *
 * Pseudocode:
- * ```
+ * ```ts
 * const i18nCreateOpCodes = [
 *   10 << I18nCreateOpCode.SHIFT, "Text Node add to DOM",
 *   11 << I18nCreateOpCode.SHIFT | I18nCreateOpCode.COMMENT, "Comment Node add to DOM",
@@ -853,11 +853,11 @@ export type LocalRefExtractor = (tNode: TNodeWithLocalRefs, currentView: LView)
 /**
 * Returns `true` if the `TNode` has a directive which has `@Input()` for `class` binding.
 *
- * ```
+ * ```html
 * <div my-dir [class]="exp"></div>
 * ```
 * and
- * ```
+ * ```ts
 * @Directive({
 * })
 * class MyDirective {
@@ -878,11 +878,11 @@ export function hasClassInput(tNode: TNode) {
 /**
 * Returns `true` if the `TNode` has a directive which has `@Input()` for `style` binding.
 *
- * ```
+ * ```html
 * <div my-dir [style]="exp"></div>
 * ```
 * and
- * ```
+ * ```ts
 * @Directive({
 * })
 * class MyDirective {
@@ -44,7 +44,7 @@ export type TStylingKeyPrimitive = string | null | false;
 *
 * Imagine we have:
 *
- * ```
+ * ```angular-ts
 * <div class="TEMPLATE" my-dir>
 *
 * @Directive({
@@ -57,7 +57,7 @@ export type TStylingKeyPrimitive = string | null | false;
 *
 * In the above case the linked list will contain one item:
 *
- * ```
+ * ```ts
 *   // assume binding location: 10 for `ɵɵclassProp('dynamic', ctx.exp);`
 *   tData[10] = <TStylingStatic>[
 *     '': 'dynamic', // This is the wrapped value of `TStylingKey`
@@ -74,13 +74,13 @@ export type TStylingKeyPrimitive = string | null | false;
 * `dynamic` (there is not). Therefore it is safe to remove it.
 *
 * If setting `true` case:
- * ```
+ * ```ts
 *   lView[10] = true;     // assume `ctx.exp` is `true`
 *   lView[10 + 1] = true; // Just normalized `lView[10]`
 * ```
 * So when the function is resolving styling value, it first needs to look into the linked list
 * (there is none) and than into `TNode.residualClass` (TNode.residualStyle) which contains
- * ```
+ * ```ts
 *   tNode.residualClass = [
 *     'TEMPLATE': true,
 *   ];
@@ -516,7 +516,7 @@ export const enum PreOrderHookFlags {
 *
 * ## Example
 *
- * ```
+ * ```ts
 * const hostBindingOpCodes = [
 *   ~30,                               // Select element 30
 *   40, 45, MyDir.ɵdir.hostBindings    // Invoke host bindings on MyDir on element 30;
@@ -527,7 +527,7 @@ export const enum PreOrderHookFlags {
 * ```
 *
 * ## Pseudocode
- * ```
+ * ```ts
 * const hostBindingOpCodes = tView.hostBindingOpCodes;
 * if (hostBindingOpCodes === null) return;
 * for (let i = 0; i < hostBindingOpCodes.length; i++) {
@@ -277,7 +277,7 @@ export function isSkipHydrationRootTNode(tNode: TNode): boolean {
 * Enables directive matching on elements.
 *
 *  * Example:
- * ```
+ * ```html
 * <my-comp my-directive>
 *   Should match component / directive.
 * </my-comp>
@@ -308,7 +308,7 @@ export function enterSkipHydrationBlock(tNode: TNode): void {
 * Disables directive matching on element.
 *
 *  * Example:
- * ```
+ * ```html
 * <my-comp my-directive>
 *   Should match component / directive.
 * </my-comp>
@@ -34,7 +34,7 @@ import {getTView} from '../state';
 * instructions can be traversed in priority order when computing the styles.
 *
 * Assume we are dealing with the following code:
- * ```
+ * ```angular-ts
 * @Component({
 *   template: `
 *     <my-cmp [style]=" {color: '#001'} "
@@ -105,7 +105,7 @@ import {getTView} from '../state';
 *
 * NOTE: the comment binding location is for illustrative purposes only.
 *
- * ```
+ * ```ts
 * // Template: (ExampleComponent)
 *     ɵɵstyleMap({color: '#001'});   // Binding index: 10
 *     ɵɵstyleProp('color', '#002');  // Binding index: 12
@@ -122,7 +122,7 @@ import {getTView} from '../state';
 *
 * The correct priority order of concatenation is:
 *
- * ```
+ * ```ts
 * // MyComponent
 *     ɵɵstyleMap({color: '#003'});   // Binding index: 20
 *     ɵɵstyleProp('color', '#004');  // Binding index: 22
@@ -69,7 +69,7 @@ export function getLastParsedValue(text: string): string {
 * Initializes `className` string for parsing and parses the first token.
 *
 * This function is intended to be used in this format:
- * ```
+ * ```ts
 * for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) {
 *   const key = getLastParsedKey();
 *   ...
@@ -87,7 +87,7 @@ export function parseClassName(text: string): number {
 * Parses next `className` token.
 *
 * This function is intended to be used in this format:
- * ```
+ * ```ts
 * for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) {
 *   const key = getLastParsedKey();
 *   ...
@@ -111,7 +111,7 @@ export function parseClassNameNext(text: string, index: number): number {
 * Initializes `cssText` string for parsing and parses the first key/values.
 *
 * This function is intended to be used in this format:
- * ```
+ * ```ts
 * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) {
 *   const key = getLastParsedKey();
 *   const value = getLastParsedValue();
@@ -130,7 +130,7 @@ export function parseStyle(text: string): number {
 * Parses the next `cssText` key/values.
 *
 * This function is intended to be used in this format:
- * ```
+ * ```ts
 * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) {
 *   const key = getLastParsedKey();
 *   const value = getLastParsedValue();
@@ -159,7 +159,7 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   * @usageNotes
   * ### Example
   *
-   * ```typescript
+   * ```ts
   * @Component({
   *   selector: 'app-root',
   *   template: `Number of ticks: {{numberOfTicks}}`
@@ -205,7 +205,7 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   * we want to check and update the list every five seconds. We can do that by detaching
   * the component's change detector and doing a local check every five seconds.
   *
-   * ```typescript
+   * ```ts
   * class DataProvider {
   *   // in a real application the returned data will be different every time
   *   get data() {
@@ -258,7 +258,7 @@ export class ViewRef<T> implements EmbeddedViewRef<T>, ChangeDetectorRefInterfac
   * its change detector from the main change detector tree when the component's live property
   * is set to false.
   *
-   * ```typescript
+   * ```ts
   * class DataProvider {
   *   data = 1;
   *
@@ -71,7 +71,7 @@ export const TESTABILITY_GETTER = new InjectionToken<GetTestability>('');
 * providers using the `provideProtractorTestingSupport()` function and adding them into the
 * `options.providers` array. Example:
 *
- * ```typescript
+ * ```ts
 * import {provideProtractorTestingSupport} from '@angular/platform-browser';
 *
 * await bootstrapApplication(RootComponent, providers: [provideProtractorTestingSupport()]);
@@ -16,7 +16,7 @@ import {getDocument} from './render3/interfaces/document';
 *
 * Example:
 *
- * ```
+ * ```ts
 * const COUNTER_KEY = makeStateKey<number>('counter');
 * let value = 10;
 *
@@ -35,7 +35,7 @@ export type StateKey<T> = string & {
 *
 * Example:
 *
- * ```
+ * ```ts
 * const COUNTER_KEY = makeStateKey<number>('counter');
 * let value = 10;
 *
@@ -11,7 +11,7 @@
 * Intended to be used as a transform function of an input.
 *
 *  @usageNotes
- *  ```typescript
+ *  ```ts
 *  @Input({ transform: booleanAttribute }) status!: boolean;
 *  ```
 * @param value Value to be transformed.
@@ -29,7 +29,7 @@ export function booleanAttribute(value: unknown): boolean {
 * @param fallbackValue Value to use if the provided value can't be parsed as a number.
 *
 *  @usageNotes
- *  ```typescript
+ *  ```ts
 *  @Input({ transform: numberAttribute }) id!: number;
 *  ```
 *
@@ -14,7 +14,7 @@ import {noSideEffects} from './closure';
 * An interface implemented by all Angular type decorators, which allows them to be used as
 * decorators as well as Angular syntax.
 *
- * ```
+ * ```ts
 * @ng.Component({...})
 * class MyClass {...}
 * ```
@@ -28,7 +28,7 @@ const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B';
 *
 * see: https://html.spec.whatwg.org/multipage/syntax.html#comments
 *
- * ```
+ * ```ts
 * div.innerHTML = div.innerHTML
 * ```
 *
@@ -39,7 +39,7 @@ let ngZoneInstanceId = 0;
 * @usageNotes
 * ### Example
 *
- * ```
+ * ```ts
 * import {Component, NgZone} from '@angular/core';
 * import {NgIf} from '@angular/common';
 *
@@ -27,7 +27,7 @@ import {MockRendererFactory} from './mock_renderer_factory';
 /**
 * Setups a simple `LView` so that it is possible to do unit tests on instructions.
 *
- * ```
+ * ```ts
 * describe('styling', () => {
 *  beforeEach(enterViewWithOneDiv);
 *  afterEach(leaveView);
@@ -18,7 +18,7 @@ import {TView} from '@angular/core/src/render3/interfaces/view';
 * This is later used by `isShapeOf` method to ensure that a particular object has a particular
 * shape.
 *
- * ```
+ * ```ts
 * interface MyShape {
 *   foo: string,
 *   bar: number
@@ -34,7 +34,7 @@ import {TView} from '@angular/core/src/render3/interfaces/view';
 * `MyShape` is refactored to change a set of properties we would like to have a compile time error
 * that the `ExpectedPropertiesOfShape` also needs to be changed.
 *
- * ```
+ * ```ts
 * const ExpectedPropertiesOfShape = <ShapeOf<MyShape>>{foo: true, bar: true};
 * ```
 * The above code will force through compile time checks that the `ExpectedPropertiesOfShape` match
@@ -50,7 +50,7 @@ export type ShapeOf<T> = {
 /**
 * Determines if a particular object is of a given shape (duck-type version of `instanceof`.)
 *
- * ```
+ * ```ts
 * isShapeOf(someObj, {foo: true, bar: true});
 * ```
 *
@@ -59,7 +59,7 @@ export function matchObjectShape<T>(
 * Asymmetric matcher which matches a `TView` of a given shape.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(tNode).toEqual(matchTView({type: TViewType.Root}));
 * expect({
 *   node: tNode
@@ -78,7 +78,7 @@ export function matchTView(expected?: Partial<TView>): jasmine.AsymmetricMatcher
 * Asymmetric matcher which matches a `TNode` of a given shape.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(tNode).toEqual(matchTNode({type: TNodeType.Element}));
 * expect({
 *   node: tNode
@@ -97,7 +97,7 @@ export function matchTNode(expected?: Partial<TNode>): jasmine.AsymmetricMatcher
 * Asymmetric matcher which matches a `T18n` of a given shape.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(tNode).toEqual(matchT18n({vars: 0}));
 * expect({
 *   node: tNode
@@ -116,7 +116,7 @@ export function matchTI18n(expected?: Partial<TI18n>): jasmine.AsymmetricMatcher
 * Asymmetric matcher which matches a `T1cu` of a given shape.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(tNode).toEqual(matchTIcu({type: TIcuType.select}));
 * expect({
 *   type: TIcuType.select
@@ -135,7 +135,7 @@ export function matchTIcu(expected?: Partial<TIcu>): jasmine.AsymmetricMatcher<T
 * Asymmetric matcher which matches a DOM Element.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(div).toEqual(matchT18n('div', {id: '123'}));
 * expect({
 *   node: div
@@ -199,7 +199,7 @@ export function matchDomElement(
 * Asymmetric matcher which matches DOM text node.
 *
 * Expected usage:
- * ```
+ * ```ts
 * expect(div).toEqual(matchDomText('text'));
 * expect({
 *   node: div
@@ -49,7 +49,7 @@ function numOfWhiteSpaceLeadingChars(text: string): number {
 /**
 * Jasmine AsymmetricMatcher which can be used to assert `.debug` properties.
 *
- * ```
+ * ```ts
 * expect(obj).toEqual({
 *   create: matchDebug('someValue')
 * })
@@ -12,7 +12,7 @@
 *
 * Example:
 *
- * ```
+ * ```ts
 * it('...', waitForAsync(inject([AClass], (object) => {
 *   object.doSomething.then(() => {
 *     expect(...);
@@ -91,7 +91,7 @@ export function fakeAsync(fn: Function, options?: {flush?: boolean}): (...args:
 * `processNewMacroTasksSynchronously` defaults to true, and the nested
 * function is executed on each tick.
 *
- * ```
+ * ```ts
 * it ('test with nested setTimeout', fakeAsync(() => {
 *   let nestedTimeoutInvoked = false;
 *   function funcWithNestedTimeout() {
@@ -108,7 +108,7 @@ export function fakeAsync(fn: Function, options?: {flush?: boolean}): (...args:
 * In the following case, `processNewMacroTasksSynchronously` is explicitly
 * set to false, so the nested timeout function is not invoked.
 *
- * ```
+ * ```ts
 * it ('test with nested setTimeout', fakeAsync(() => {
 *   let nestedTimeoutInvoked = false;
 *   function funcWithNestedTimeout() {
--- a/Show More
+++ b/Show More