From 3c417c7e56f4e595438e5341f4e0fdb23d0f7337 Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Sat, 13 Dec 2025 19:50:44 -0500
Subject: [PATCH] docs: update code block syntax highlighting in documentation
 & fixed identation

(cherry picked from commit b043c7490fc7b039b2ef37542522374580d4f2c6)
---
 .../ecosystem/service-workers/app-shell.md    |  4 +-
 .../guide/di/creating-injectable-service.md   |  9 ++---
 .../content/guide/forms/signals/comparison.md |  2 +-
 .../content/guide/forms/signals/validation.md |  2 +-
 .../guide/i18n/import-global-variants.md      |  2 -
 .../content/guide/i18n/translation-files.md   | 10 ++---
 adev/src/content/guide/image-optimization.md  |  1 -
 adev/src/content/guide/tailwind.md            |  8 ++--
 .../content/reference/configs/npm-packages.md |  2 +-
 .../steps/2-connect-form-template/README.md   |  2 +-
 .../steps/4-display-errors/README.md          |  4 +-
 .../1-creating-your-first-signal/README.md    |  2 +-
 .../README.md                                 | 40 +++++++++----------
 .../8-using-signals-with-directives/README.md |  2 +-
 14 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/adev/src/content/ecosystem/service-workers/app-shell.md b/adev/src/content/ecosystem/service-workers/app-shell.md
index 31e86a0a83d..7a7d9afc4ca 100644
--- a/adev/src/content/ecosystem/service-workers/app-shell.md
+++ b/adev/src/content/ecosystem/service-workers/app-shell.md
@@ -26,7 +26,7 @@ For more information about this command, see [App shell command](cli/generate/ap
 
 The command updates the application code and adds extra files to the project structure.
 
-<docs-code language="text">
+```text
 src
 ├── app
 │ ├── app.config.server.ts # server application configuration
@@ -36,7 +36,7 @@ src
 │   ├── app-shell.component.spec.ts
 │   └── app-shell.component.ts
 └── main.server.ts # main server application bootstrapping
-</docs-code>
+```
 
 <docs-step title="Verify the application is built with the shell content">
 
diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md
index 0d1784ea2f7..65c3b89d372 100644
--- a/adev/src/content/guide/di/creating-injectable-service.md
+++ b/adev/src/content/guide/di/creating-injectable-service.md
@@ -33,8 +33,7 @@ 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.
 That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server:
 
-<docs-code header="hero.service.ts" language="typescript"
-           highlight="[7,8,12,13]">
+```ts {header: "hero.service.ts", highlight="[7,8,12,13]"}
 import { inject } from "@angular/core";
 
 export class HeroService {
@@ -51,7 +50,7 @@ this.logger.log(`Fetched ${this.heroes.length} heroes.`);
 return this.heroes;
 }
 }
-</docs-code>
+```
 
 ## Creating an injectable service with the CLI
 
@@ -61,9 +60,9 @@ To generate a new `HeroService` class in the `src/app/heroes` folder, follow the
 
 1. Run this [Angular CLI](/tools/cli) command:
 
-<docs-code language="sh">
+```sh
 ng generate service heroes/hero
-</docs-code>
+```
 
 This command creates the following default `HeroService`:
 
diff --git a/adev/src/content/guide/forms/signals/comparison.md b/adev/src/content/guide/forms/signals/comparison.md
index d2690a92981..2b56dfeb4a7 100644
--- a/adev/src/content/guide/forms/signals/comparison.md
+++ b/adev/src/content/guide/forms/signals/comparison.md
@@ -22,7 +22,7 @@ NOTE: Signal Forms are [experimental](reference/releases#experimental) as of Ang
 The best way to understand the differences is to see the same form implemented in all three approaches.
 
 <docs-code-multifile>
-  <docs-code header="Signal forms" path="adev/src/content/examples/signal-forms/src/comparison/app/signal-forms.ts"/>
+  <docs-code language="angular-ts" header="Signal forms" path="adev/src/content/examples/signal-forms/src/comparison/app/signal-forms.ts"/>
   <docs-code header="Reactive forms" path="adev/src/content/examples/signal-forms/src/comparison/app/reactive-forms.ts"/>
   <docs-code header="Template-driven forms" path="adev/src/content/examples/signal-forms/src/comparison/app/template-driven-forms.ts"/>
 </docs-code-multifile>
diff --git a/adev/src/content/guide/forms/signals/validation.md b/adev/src/content/guide/forms/signals/validation.md
index 38d12c76bdf..255038f8520 100644
--- a/adev/src/content/guide/forms/signals/validation.md
+++ b/adev/src/content/guide/forms/signals/validation.md
@@ -652,7 +652,7 @@ The `validateHttp()` validation rule:
 
 While async validation runs, the field's `pending()` signal returns `true`. Use this to show loading indicators:
 
-```ts
+```angular-html
 @if (form.username().pending()) {
   <span class="spinner">Checking...</span>
 }
diff --git a/adev/src/content/guide/i18n/import-global-variants.md b/adev/src/content/guide/i18n/import-global-variants.md
index 0ef6b084299..dc1ff607590 100644
--- a/adev/src/content/guide/i18n/import-global-variants.md
+++ b/adev/src/content/guide/i18n/import-global-variants.md
@@ -2,8 +2,6 @@
 
 The [Angular CLI][CliMain] automatically includes locale data if you run the [`ng build`][CliBuild] command with the `--localize` option.
 
-<!--todo: replace with docs-code -->
-
 ```shell
 ng build --localize
 ```
diff --git a/adev/src/content/guide/i18n/translation-files.md b/adev/src/content/guide/i18n/translation-files.md
index d7f26a54cd0..45782f9b44d 100644
--- a/adev/src/content/guide/i18n/translation-files.md
+++ b/adev/src/content/guide/i18n/translation-files.md
@@ -86,19 +86,19 @@ To create a translation file for a locale or language, complete the following ac
 1. Make a copy of the source language file to create a _translation_ file for each language.
 1. Rename the _translation_ file to add the locale.
 
-   <docs-code language="file">
+   ```file {hideCopy}
 
    messages.xlf --> messages.{locale}.xlf
 
-   </docs-code>
+   ```
 
 1. Create a new directory at your project root named `locale`.
 
-   <docs-code language="file">
+   ```file {hideCopy}
 
    src/locale
 
-   </docs-code>
+   ```
 
 1. Move the _translation_ file to the new directory.
 1. Send the _translation_ file to your translator.
@@ -145,7 +145,7 @@ The following actions describe the translation process for French.
 1. Translate the other text nodes.
    The following example displays the way to translate.
 
-<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf" visibleRegion="translated-other-nodes"/>
+   <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf" visibleRegion="translated-other-nodes"/>
 
 IMPORTANT: Don't change the IDs for translation units.
 Each `id` attribute is generated by Angular and depends on the content of the component text and the assigned meaning.
diff --git a/adev/src/content/guide/image-optimization.md b/adev/src/content/guide/image-optimization.md
index 74696e59b63..abf0419e3b3 100644
--- a/adev/src/content/guide/image-optimization.md
+++ b/adev/src/content/guide/image-optimization.md
@@ -42,7 +42,6 @@ imports: [
 ],
 ```
 
-</docs-code>
 </docs-step>
 <docs-step title="(Optional) Set up a Loader">
 An image loader is not **required** in order to use NgOptimizedImage, but using one with an image CDN enables powerful performance features, including automatic `srcset`s for your images.
diff --git a/adev/src/content/guide/tailwind.md b/adev/src/content/guide/tailwind.md
index b0b6e85ba10..be41eef76e0 100644
--- a/adev/src/content/guide/tailwind.md
+++ b/adev/src/content/guide/tailwind.md
@@ -70,15 +70,15 @@ Add the `@tailwindcss/postcss` plugin into your PostCSS configuration.
 
 Add an `@import` to `./src/styles.css` that imports Tailwind CSS.
 
-<docs-code language="css" header="src/styles.css">
+```css {header: "src/styles.css"}
 @import "tailwindcss";
-</docs-code>
+```
 
 If you're using SCSS, add `@use` to `./src/styles.scss`.
 
-<docs-code language="scss" header="src/styles.scss">
+```scss {header: "src/styles.scss"}
 @use "tailwindcss";
-</docs-code>
+```
 
 ### 5. Start using Tailwind in your project
 
diff --git a/adev/src/content/reference/configs/npm-packages.md b/adev/src/content/reference/configs/npm-packages.md
index a6abb9f0144..486cdce943d 100644
--- a/adev/src/content/reference/configs/npm-packages.md
+++ b/adev/src/content/reference/configs/npm-packages.md
@@ -39,5 +39,5 @@ For a complete list of Angular packages, see the [API reference](api).
 | [`@angular/cli`](https://github.com/angular/angular-cli)                                       | Contains the Angular CLI binary for running `ng` commands.                                                                                                                                                   |
 | [`@angular-devkit/build-angular`](https://www.npmjs.com/package/@angular-devkit/build-angular) | Contains default CLI builders for bundling, testing, and serving Angular applications and libraries.                                                                                                         |
 | [`rxjs`](https://www.npmjs.com/package/rxjs)                                                   | A library for reactive programming using `Observables`.                                                                                                                                                      |
-| [`zone.js`](https://github.com/angular/zone.js)                                                | Angular relies on `zone.js`` to run Angular's change detection processes when native JavaScript operations raise events.                                                                                     |
+| [`zone.js`](https://github.com/angular/zone.js)                                                | Angular relies on `zone.js` to run Angular's change detection processes when native JavaScript operations raise events.                                                                                      |
 | [`typescript`](https://www.npmjs.com/package/typescript)                                       | The TypeScript compiler, language server, and built-in type definitions.                                                                                                                                     |
diff --git a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
index 81910530f9e..de371dc11e8 100644
--- a/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
+++ b/adev/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -63,7 +63,7 @@ Add the `[field]` directive to the checkbox input:
 <docs-step title="Display the form values">
 Below the form, there's a debug section to show current form values. Display each field value using `.value()`:
 
-```html
+```angular-html
 <p>Email: {{ loginForm.email().value() }}</p>
 <p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
 <p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
diff --git a/adev/src/content/tutorials/signal-forms/steps/4-display-errors/README.md b/adev/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
index 9b278dfb4cd..39facf6eee6 100644
--- a/adev/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
+++ b/adev/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
@@ -18,7 +18,7 @@ Let's display validation feedback!
 <docs-step title="Add error display for email field">
 Below the email input, add conditional error display. This will only show errors when the field is both invalid and touched:
 
-```html
+```angular-html
 <label>
   Email
   <input type="email" [field]="loginForm.email" />
@@ -38,7 +38,7 @@ The `loginForm.email()` call accesses the field's state signal. The `invalid()`
 <docs-step title="Add error display for password field">
 Below the password input, add the same pattern for password errors:
 
-```html
+```angular-html
 <label>
   Password
   <input type="password" [field]="loginForm.password" />
diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md
index cd2cf9372d8..98448706dc0 100644
--- a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md
+++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md
@@ -42,7 +42,7 @@ Update the status indicator to display the current user status by:
 1. Binding the signal to the class attribute with `[class]="userStatus()"`
 2. Displaying the status text by replacing `???` with `{{ userStatus() }}`
 
-```html
+```angular-html
 <!-- Update from: -->
 <div class="status-indicator offline">
   <span class="status-dot"></span>
diff --git a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
index 8305008d1e5..1076bda7b11 100644
--- a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
+++ b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
@@ -66,31 +66,31 @@ This demonstrates how computed signals can perform calculations and combine mult
 <docs-step title="Display the computed values in the template">
 The template already has placeholders showing "Loading...". Replace them with your computed signals:
 
-1. For notifications, replace `Loading...` with an @if block:
+1. For notifications, replace `Loading...` with an `@if` block:
 
-```angular-html
-@if (notificationsEnabled()) {
-  Enabled
-} @else {
-  Disabled
-}
-```
+   ```angular-html
+   @if (notificationsEnabled()) {
+     Enabled
+   } @else {
+     Disabled
+   }
+   ```
 
-2. For the message, replace `Loading...` with:
+1. For the message, replace `Loading...` with:
 
-```angular-html
-{{ statusMessage() }}
-```
+   ```angular-html
+   {{ statusMessage() }}
+   ```
 
-3. For working hours, replace `Loading...` with an @if block:
+1. For working hours, replace `Loading...` with an `@if` block:
 
-```angular-html
-@if (isWithinWorkingHours()) {
-  Yes
-} @else {
-  No
-}
-```
+   ```angular-html
+   @if (isWithinWorkingHours()) {
+     Yes
+   } @else {
+     No
+   }
+   ```
 
 Notice how computed signals are called just like regular signals - with parentheses!
 </docs-step>
diff --git a/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md b/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
index 5f6dba3abc3..f5e03e5422b 100644
--- a/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
+++ b/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
@@ -76,7 +76,7 @@ The host bindings automatically re-evaluate when the signals change - just like
 <docs-step title="Use the directive in your template">
 Update the app template to demonstrate the reactive directive:
 
-```angular-ts
+```angular-html
 template: `
   <div>
     <h1>Directive with Signals</h1>