docs: format typescript examples and replace <docs-code> with fenced code blocks

Replaced <docs-code language="typescript"  to improved
readability and consistency across documentation.

Author: MeAkib

adev/src/content/best-practices/runtime-performance/skipping-subtrees.md

@@ -17,6 +17,7 @@ You can set the change detection strategy of a component to `OnPush` in the `@Co
 
 ```ts
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

adev/src/content/guide/di/creating-injectable-service.md

@@ -21,13 +21,13 @@ Angular helps you follow these principles by making it easy to factor your appli
 
 Here's an example of a service class that logs to the browser console:
 
-<docs-code header="logger.service.ts (class)" language="typescript">
+```ts {header: "logger.service.ts (class)"}
 export class Logger {
   log(msg: unknown) { console.log(msg); }
   error(msg: unknown) { console.error(msg); }
   warn(msg: unknown) { console.warn(msg); }
 }
-</docs-code>
+```
 
 Services can depend on other services.
 For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes.

adev/src/content/guide/i18n/format-data-locale.md

@@ -14,27 +14,19 @@ The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to fo
 
 To display the current date in the format for the current locale, use the following format for the `DatePipe`.
 
-<!--todo: replace with docs-code -->
-
-<docs-code language="typescript">
-
+```angular-html
 {{ today | date }}
-
-</docs-code>
+```
 
 ## Override current locale for CurrencyPipe
 
 Add the `locale` parameter to the pipe to override the current value of `LOCALE_ID` token.
 
 To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe`
 
-<!--todo: replace with docs-code -->
-
-<docs-code language="typescript">
-
+```angular-html
 {{ amount | currency : 'en-US' }}
-
-</docs-code>
+```
 
 HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application.
 

adev/src/content/guide/i18n/manage-marked-text.md

@@ -28,13 +28,9 @@ The following example defines the `introductionHeader` custom ID in a heading el
 
 The following example defines the `introductionHeader` custom ID for a variable.
 
-<!--todo: replace with code example -->
-
-<docs-code language="typescript">
-
+```ts
 variableText1 = $localize`:@@introductionHeader:Hello i18n!`;
-
-</docs-code>
+```
 
 When you specify a custom ID, the extractor generates a translation unit with the custom ID.
 
@@ -54,27 +50,19 @@ The following example includes a description, followed by the custom ID.
 
 The following example defines the `introductionHeader` custom ID and description for a variable.
 
-<!--todo: replace with code example -->
-
-<docs-code language="typescript">
-
+```ts
 variableText2 = $localize`:An introduction header for this sample@@introductionHeader:Hello i18n!`;
-
-</docs-code>
+```
 
 The following example adds a meaning.
 
 <docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
 
 The following example defines the `introductionHeader` custom ID for a variable.
 
-<!--todo: replace with code example -->
-
-<docs-code language="typescript">
-
+```ts
 variableText3 = $localize`:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
-
-</docs-code>
+```
 
 ### Define unique custom IDs
 

adev/src/content/guide/testing/component-harnesses-overview.md

@@ -8,13 +8,13 @@ Harnesses offer several benefits:
 - They make tests become more readable and easier to maintain
 - They can be used across multiple testing environments
 
-<docs-code language="typescript">
+```ts
 // Example of test with a harness for a component called MyButtonComponent
 it('should load button with exact text', async () => {
   const button = await loader.getHarness(MyButtonComponentHarness);
   expect(await button.getText()).toBe('Confirm');
 });
-</docs-code>
+```
 
 Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library.
 

adev/src/content/guide/testing/components-scenarios.md

@@ -304,12 +304,10 @@ To enable it, set a global flag before importing `zone-testing`.
 
 If you use the Angular CLI, configure this flag in `src/test.ts`.
 
-<docs-code language="typescript">
-
+```ts
 [window as any]('__zone_symbol__fakeAsyncPatchLock') = true;
 import 'zone.js/testing';
-
-</docs-code>
+```
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-clock"/>
 

adev/src/content/reference/migrations/inject-function.md

@@ -78,18 +78,18 @@ export class MyComp {
 
 #### After
 
-```typescript
+```ts
 import { Component } from '@angular/core';
 import { MyService } from './service';
 
 @Component()
 export class MyComp {
 private service = inject(MyService);
 
-/* Inserted by Angular inject() migration for backwards compatibility */
-constructor(...args: unknown[]);
+  /\*_ Inserted by Angular inject() migration for backwards compatibility _/
+  constructor(...args: unknown[]);
 
-constructor() {}
+  constructor() {}
 }
 ```
 

adev/src/content/tools/cli/schematics-authoring.md

@@ -36,27 +36,25 @@ A change can be accepted or ignored, or throw an exception.
 When you create a new blank schematic with the [Schematics CLI](#schematics-cli), the generated entry function is a _rule factory_.
 A `RuleFactory` object defines a higher-order function that creates a `Rule`.
 
-<docs-code header="index.ts" language="typescript">
-
+```ts {header: "index.ts"}
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 
 // You don't have to export the function as default.
 // You can also have more than one rule factory per file.
 export function helloWorld(\_options: any): Rule {
-return (tree: Tree,\_context: SchematicContext) => {
-return tree;
-};
+   return (tree: Tree,\_context: SchematicContext) => {
+    return tree;
+  };
 }
-
-</docs-code>
+```
 
 Your rules can make changes to your projects by calling external tools and implementing logic.
 You need a rule, for example, to define how a template in the schematic is to be merged into the hosting project.
 
 Rules can make use of utilities provided with the `@schematics/angular` package.
 Look for helper functions for working with modules, dependencies, TypeScript, AST, JSON, Angular CLI workspaces and projects, and more.
 
-<docs-code header="index.ts" language="typescript">
+```ts {header: "index.ts"}
 
 import {
 JsonAstObject,
@@ -67,8 +65,7 @@ normalize,
 parseJsonAst,
 strings,
 } from '@angular-devkit/core';
-
-</docs-code>
+```
 
 ### Defining input options with a schema and interfaces