diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
index 97abbd37b20..b7250213a41 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
@@ -12,24 +12,24 @@ In this activity, you'll learn how to use deferrable views to defer load a secti
 <docs-step title="Add a `@defer` block to a section of a template">
 In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
 
-<docs-code language="angular-html">
+```angular-html
 @defer {
   <article-comments />
 }
-</docs-code>
+```
 
 By default, `@defer` loads the `article-comments` component when the browser is idle.
 
 In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
 
-<docs-code language="markdown">
+```markdown
 Initial chunk files | Names                      |  Raw size
-chunk-NNSQHFIE.js   | -                          | 769.00 kB | 
+chunk-NNSQHFIE.js   | -                          | 769.00 kB |
 main.js             | main                       | 229.25 kB |
 
 Lazy chunk files | Names | Raw size
 chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
-</docs-code>
+```
 
 </docs-step>
 </docs-workflow>
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
index 9d32e42dc25..40d584c770b 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
@@ -39,25 +39,27 @@ In this activity, you'll learn how to use the `@loading`, `@error` and `@placeho
 <docs-step title="Add `@placeholder` block">
 In your `app.ts`, add a `@placeholder` block to the `@defer` block.
 
-<docs-code language="angular-html" highlight="[3,4,5]">
+```angular-html {highlight:[3,4,5]}
 @defer {
   <article-comments />
 } @placeholder {
   <p>Placeholder for comments</p>
 }
-</docs-code>
+```
+
 </docs-step>
 
 <docs-step title="Configure the `@placeholder` block">
 The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
 
-<docs-code language="angular-html" highlight="[3,4,5]">
+```angular-html {highlight:[3,4,5]}
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
   <p>Placeholder for comments</p>
 }
-</docs-code>
+```
+
 </docs-step>
 
 <docs-step title="Add `@loading` block">
@@ -72,7 +74,7 @@ Both parameters are specified in time increments of milliseconds (ms) or seconds
 
 Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
 
-<docs-code language="angular-html" highlight="[5,6,7]">
+```angular-html {highlight:[5,6,7]}
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
@@ -80,7 +82,7 @@ Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` a
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
 }
-</docs-code>
+```
 
 NOTE: this example uses two parameters, separated by the ; character.
 
@@ -89,7 +91,7 @@ NOTE: this example uses two parameters, separated by the ; character.
 <docs-step title="Add `@error` block">
 Finally, add an `@error` block to the `@defer` block.
 
-<docs-code language="angular-html" highlight="[7,8,9]">
+```angular-html {highlight:[7,8,9]}
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
@@ -99,7 +101,8 @@ Finally, add an `@error` block to the `@defer` block.
 } @error {
   <p>Failed to load comments</p>
 }
-</docs-code>
+```
+
 </docs-step>
 </docs-workflow>
 
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
index 4308728f599..98ccd8c45a2 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
@@ -41,7 +41,7 @@ In this activity, you'll learn how to use triggers to specify the condition to l
 <docs-step title="Add `on hover` trigger">
 In your `app.ts`,  add an `on hover` trigger to the `@defer` block.
 
-<docs-code language="angular-html" hightlight="[1]">
+```angular-html {highlight:[1]}
 @defer (on hover) {
   <article-comments />
 } @placeholder (minimum 1s) {
@@ -51,7 +51,7 @@ In your `app.ts`,  add an `on hover` trigger to the `@defer` block.
 } @error {
   <p>Failed to load comments</p>
 }
-</docs-code>
+```
 
 Now, the page will not render the comments section until you hover its placeholder.
 </docs-step>
@@ -59,7 +59,7 @@ Now, the page will not render the comments section until you hover its placehold
 <docs-step title="Add a 'Show all comments' button">
 Next, update the template to include a button with the label "Show all comments". Include a template variable called `#showComments` with the button.
 
-<docs-code language="angular-html" hightlight="[1]">
+```angular-html {highlight:[1]}
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover) {
@@ -72,7 +72,7 @@ Next, update the template to include a button with the label "Show all comments"
 } @error {
   <p>Failed to load comments</p>
 }
-</docs-code>
+```
 
 NOTE: for more information on [template variables check the documentation](https://angular.dev/guide/templates/reference-variables#).
 
@@ -81,7 +81,7 @@ NOTE: for more information on [template variables check the documentation](https
 <docs-step title="Add `on interaction` trigger">
 Update the `@defer` block in the template to use the `on interaction` trigger. Provide the `showComments` template variable as the parameter to `interaction`.
 
-<docs-code language="angular-html" hightlight="[3]">
+```angular-html {highlight:[3]}
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover; on interaction(showComments)) {
@@ -94,7 +94,7 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
 } @error {
   <p>Failed to load comments</p>
 }
-</docs-code>
+```
 
 With these changes, the page will wait for one of the following conditions before rendering the comments section:
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
index e80d301fc70..545c31b1bdc 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
@@ -32,13 +32,13 @@ The code above is an example of how to use a basic `@defer` block. By default `@
 
 Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded.
 
-<docs-code language="angular-html" highlight="[3,4,5]">
+```angular-html {highlight:[3,4,5]}
 @defer {
   <comments />
 } @placeholder {
   <p>Future comments</p>
 }
-</docs-code>
+```
 
 </docs-step>
 
@@ -46,7 +46,7 @@ Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is wh
 
 Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded.
 
-<docs-code language="angular-html" highlight="[5,6,7]">
+```angular-html {highlight:[5,6,7]}
 @defer {
   <comments />
 } @placeholder {
@@ -54,7 +54,7 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
 } @loading {
   <p>Loading comments...</p>
 }
-</docs-code>
+```
 
 </docs-step>
 
@@ -62,7 +62,7 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
 
 Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds.
 
-<docs-code language="angular-html" highlight="[5]">
+```angular-html {highlight:[5]}
 @defer {
   <comments />
 } @placeholder {
@@ -70,7 +70,7 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
 } @loading (minimum 2s) {
   <p>Loading comments...</p>
 }
-</docs-code>
+```
 
 </docs-step>
 
@@ -78,11 +78,11 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
 
 Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
 
-<docs-code language="angular-html" highlight="[1]">
+```angular-html {highlight:[1]}
 @defer (on viewport) {
   <comments />
 }
-</docs-code>
+```
 
 </docs-step>
 
@@ -90,7 +90,7 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
 
 A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
 
-<docs-code language="html" highlight="[1]">
+```html {highlight:[1]}
 <article>
   <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
   <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
@@ -99,7 +99,7 @@ A viewport trigger is best used when you're deferring content that's far enough
   <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
   <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p>
 </article>
-</docs-code>
+```
 
 Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
index d93a5b4b552..46ae450ac38 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
@@ -31,7 +31,7 @@ import { NgOptimizedImage } from '@angular/common';
 
 To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ngSrc`. This applies for both static image sources (i.e., `src`) and dynamic image sources (i.e., `[src]`).
 
-<docs-code language="angular-ts" highlight="[[9], [13]]">
+```angular-ts {highlight:[[9],[13]]}
 import { NgOptimizedImage } from '@angular/common';
 
 @Component({
@@ -48,7 +48,7 @@ template: `     ...
   `,
 imports: [NgOptimizedImage],
 })
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
index 064e0d71f74..6bb497aabd0 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
@@ -33,7 +33,7 @@ In `app.config.ts`, configure the app to Angular Router with the following steps
 1. Import `routes` from the `./app.routes.ts`.
 1. Call the `provideRouter` function with `routes` passed in as an argument in the `providers` array.
 
-<docs-code language="ts" highlight="[2,3,6]">
+```ts {highlight:[2,3,6]}
 import {ApplicationConfig} from '@angular/core';
 import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
@@ -41,7 +41,7 @@ import {routes} from './app.routes';
 export const appConfig: ApplicationConfig = {
 providers: [provideRouter(routes)],
 };
-</docs-code>
+```
 
 </docs-step>
 
@@ -51,12 +51,13 @@ Finally, to make sure your app is ready to use the Angular Router, you need to t
 
 Update the template for `App` by adding `<router-outlet />`
 
-<docs-code language="angular-ts" highlight="[11]">
+```angular-ts {highlight:[11]}
 import {RouterOutlet} from '@angular/router';
 
 @Component({
 ...
-template: `     <nav>
+template: `
+    <nav>
       <a href="/">Home</a>
       |
       <a href="/user">User</a>
@@ -66,7 +67,7 @@ template: `     <nav>
 imports: [RouterOutlet],
 })
 export class App {}
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
index 92519ddbe31..82ba5708cde 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
@@ -43,18 +43,18 @@ In addition to defining the routes correctly, Angular Router also enables you to
 
 In `app.routes.ts`, add the `title` property to the default route (`path: ''`) and the `user` route. Here's an example:
 
-<docs-code language="ts" highlight="[8]">
+```ts {highlight:[7]}
 import {Routes} from '@angular/router';
 import {Home} from './home/home';
 
 export const routes: Routes = [
-{
-path: '',
-title: 'App Home Page',
-component: Home,
-},
+  {
+    path: '',
+    title: 'App Home Page',
+    component: Home,
+  },
 ];
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
index bef019e6bc5..97408ea9407 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
@@ -31,7 +31,7 @@ For this form to use Angular features that enable data binding to forms, you'll
 
 Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`.
 
-<docs-code language="ts" highlight="[2, 7]">
+```ts {highlight:[2,7]}
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
@@ -40,7 +40,7 @@ import {FormsModule} from '@angular/forms';
 imports: [FormsModule],
 })
 export class User {}
-</docs-code>
+```
 
 </docs-step>
 
@@ -50,12 +50,12 @@ The `FormsModule` has a directive called `ngModel` that binds the value of the i
 
 Update the input to use the `ngModel` directive, specifically with the following syntax `[(ngModel)]="favoriteFramework"` to bind to the `favoriteFramework` property.
 
-<docs-code language="html" highlight="[3]">
+```html {highlight:[3]}
 <label for="framework">
   Favorite Framework:
   <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
 </label>
-</docs-code>
+```
 
 After you've made changes, try entering a value in the input field. Notice how it updates on the screen (yes, very cool).
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
index 757efa1c527..95c387f8706 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
@@ -14,7 +14,7 @@ In this activity, you'll learn how to get the value from your form input.
 
 To display the input value in a template, you can use the interpolation syntax `{{}}` just like any other class property of the component:
 
-<docs-code language="angular-ts" highlight="[5]">
+```angular-ts {highlight:[5]}
 @Component({
   selector: 'app-user',
   template: `
@@ -29,7 +29,7 @@ To display the input value in a template, you can use the interpolation syntax `
 export class User {
   favoriteFramework = '';
 }
-</docs-code>
+```
 
 </docs-step>
 
@@ -37,7 +37,7 @@ export class User {
 
 When you need to reference the input field value in the component class, you can do so by accessing the class property with the `this` syntax.
 
-<docs-code language="angular-ts" highlight="[15]">
+```angular-ts {highlight:[15]}
 ...
 @Component({
   selector: 'app-user',
@@ -51,11 +51,11 @@ export class User {
   favoriteFramework = '';
   ...
 
-showFramework() {
-alert(this.favoriteFramework);
+  showFramework() {
+    alert(this.favoriteFramework);
+  }
 }
-}
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md b/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
index 418f478b5da..295938dc618 100644
--- a/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
@@ -96,24 +96,25 @@ This method will display values from the form, you can access the values from th
 
 In the component class, add the `handleSubmit()` method to handle the form submission.
 
-<docs-code language="ts">
+```ts
 handleSubmit() {
   alert(
     this.profileForm.value.name + ' | ' + this.profileForm.value.email
   );
 }
-</docs-code>
+```
+
 </docs-step>
 
 <docs-step title="Add `ngSubmit` to the form">
 You have access to the form values, now it is time to handle the submission event and use the `handleSubmit` method.
 Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted.
 
-<docs-code language="angular-html" highlight="[3]">
+```angular-html {highlight:[3]}
 <form
   [formGroup]="profileForm"
   (ngSubmit)="handleSubmit()">
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md b/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
index 6d3a1fe9b05..57130011eb6 100644
--- a/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
@@ -14,12 +14,12 @@ In this activity, you'll learn how to validate forms with reactive forms.
 
 Angular provides a set of validation tools. To use them, first update the component to import `Validators` from `@angular/forms`.
 
-<docs-code language="ts" highlight="[1]">
+```ts {highlight:[1]}
 import {ReactiveFormsModule, Validators} from '@angular/forms';
 
 @Component({...})
 export class App {}
-</docs-code>
+```
 
 </docs-step>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
index cda89cf0162..99d4d7ad9bb 100644
--- a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
@@ -12,14 +12,14 @@ One way to use a service is to act as a way to interact with data and APIs. To m
 
 To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example:
 
-<docs-code language="ts" highlight="[1, 2, 3]">
+```ts {highlight:[1,2,3]}
 @Injectable({
   providedIn: 'root'
 })
 class UserService {
   // methods to retrieve and return data
 }
-</docs-code>
+```
 
 The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application.
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
index e02e67ec6c2..b16fd1d24a2 100644
--- a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
@@ -10,12 +10,12 @@ In this activity, you'll learn how to inject a service and use it in a component
 
 It is often helpful to initialize class properties with values provided by the DI system. Here's an example:
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({...})
 class PetCareDashboard {
   petRosterService = inject(PetRosterService);
 }
-</docs-code>
+```
 
 <docs-workflow>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
index e23edfce8b0..b58f8dcd780 100644
--- a/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
@@ -10,18 +10,18 @@ In this activity, you will import a pipe and use it in the template.
 
 To use a pipe in a template include it in an interpolated expression. Check out this example:
 
-<docs-code language="angular-ts" highlight="[1,5,6]">
+```angular-ts {highlight:[1,5,6]}
 import {UpperCasePipe} from '@angular/common';
 
 @Component({
-...
-template: `{{ loudMessage | uppercase }}`,
-imports: [UpperCasePipe],
+  ...
+  template: `{{ loudMessage | uppercase }}`,
+  imports: [UpperCasePipe],
 })
 export class App {
-loudMessage = 'we think you are doing great!'
+  loudMessage = 'we think you are doing great!'
 }
-</docs-code>
+```
 
 Now, it's your turn to give this a try:
 
@@ -39,19 +39,19 @@ import { LowerCasePipe } from '@angular/common';
 <docs-step title="Add the pipe to the template imports">
 Next, update `@Component()` decorator `imports` to include a reference to `LowerCasePipe`
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({
   ...
   imports: [LowerCasePipe]
 })
-</docs-code>
+```
 
 </docs-step>
 
 <docs-step title="Add the pipe to the template">
 Finally, in `app.ts` update the template to include the `lowercase` pipe:
 
-```ts
+```angular-html
 template: `{{username | lowercase }}`
 ```
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md b/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
index e60c079ff25..a07ce0d0ac5 100644
--- a/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
@@ -10,7 +10,7 @@ In this activity, you will work with some pipes and pipe parameters.
 
 To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example:
 
-```ts
+```angular-html
 template: `{{ date | date:'medium' }}`;
 ```
 
@@ -24,12 +24,12 @@ Time to customize some pipe output:
 
 In `app.ts`, update the template to include parameter for the `decimal` pipe.
 
-<docs-code language="ts" highlight="[3]">
+```angular-html {highlight:[3]}
 template: `
   ...
   <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
 `
-</docs-code>
+```
 
 NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsInfo`, this parameter uses the format: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`
 
@@ -39,12 +39,12 @@ NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsI
 
 Now, update the template to use the `date` pipe.
 
-<docs-code language="ts" highlight="[3]">
+```angular-html {highlight:[3]}
 template: `
   ...
   <li>Date with "date" {{ birthday | date: 'medium' }}</li>
 `
-</docs-code>
+```
 
 For extra fun, try some different parameters for `date`. More information can be found in the [Angular docs](guide/templates/pipes).
 
@@ -54,12 +54,12 @@ For extra fun, try some different parameters for `date`. More information can be
 
 For your last task, update the template to use the `currency` pipe.
 
-<docs-code language="ts" highlight="[3]">
+```angular-html {highlight:[3]}
 template: `
   ...
   <li>Currency with "currency" {{ cost | currency }}</li>
 `
-</docs-code>
+```
 
 You can also try different parameters for `currency`. More information can be found in the [Angular docs](guide/templates/pipes).
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
index 10a84733a2e..cf15f3472cf 100644
--- a/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
@@ -48,7 +48,7 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr
 
 Now the `ReversePipe` class is a pipe. Update the `transform` function to add the reversing logic:
 
-<docs-code language="ts" highlight="[3,4,5,6,7,8,9]">
+```ts {highlight:[3,4,5,6,7,8,9]}
 export class ReversePipe implements PipeTransform {
   transform(value: string): string {
     let reverse = '';
@@ -58,23 +58,22 @@ export class ReversePipe implements PipeTransform {
     }
 
     return reverse;
-
+  }
 }
-}
-</docs-code>
+```
 
 </docs-step>
 
 <docs-step title="Use the `ReversePipe` in the template"></docs-step>
 With the pipe logic implemented, the final step is to use it in the template. In `app.ts` include the pipe in the template and add it to the component imports:
 
-<docs-code language="angular-ts" highlight="[3,4]">
+```angular-ts {highlight:[3,4]}
 @Component({
   ...
   template: `Reverse Machine: {{ word | reverse }}`
   imports: [ReversePipe]
 })
-</docs-code>
+```
 
 </docs-workflow>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
index 2e3616923c1..56eb71a282c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
@@ -17,7 +17,7 @@ In this example, there are two components `User` and `App`.
 <docs-step title="Add a reference to `User`">
 Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template.
 
-```ts
+```angular-html
 template: `<app-user />`,
 imports: [User]
 ```
@@ -28,7 +28,7 @@ The component now displays the message `Username: youngTech`. You can update the
 <docs-step title="Add more markup">
 Because you can use any HTML markup that you want in a template, try updating the template for `App` to also include more HTML elements. This example will add a `<section>` element as the parent of the `<app-user>` element.
 
-```ts
+```angular-html
 template: `<section><app-user /></section>`,
 ```
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md b/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
index bf9b5724be6..e9e7bb5723b 100644
--- a/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
@@ -49,7 +49,7 @@ Now Angular supports native template syntax for defining the else case with the
 
 Here's an example:
 
-```angular-ts
+```angular-html
 template: `
   @if (isServerRunning) { ... }
   @else { ... }
diff --git a/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md b/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
index e4d4670febf..b4458ab9ad6 100644
--- a/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
@@ -23,22 +23,24 @@ In this example, the value of the `src` attribute will be bound to the class pro
 <docs-step title="Add a property called `isEditable`" header="app.ts" language="ts">
 Update the code in `app.ts` by adding a property to the `App` class called `isEditable` with the initial value set to `true`.
 
-<docs-code highlight="[2]">
+```ts {highlight:[2]}
 export class App {
   isEditable = true;
 }
-</docs-code>
+```
+
 </docs-step>
 
 <docs-step title="Bind to `contentEditable`" header="app.ts" language="ts">
 Next, bind the `contentEditable` attribute of the `div` to the `isEditable` property by using the <code aria-label="square brackets">[]</code> syntax.
 
-<docs-code highlight="[3]" language="angular-ts">
+```angular-ts {highlight:[3]}
 @Component({
   ...
   template: `<div [contentEditable]="isEditable"></div>`,
 })
-</docs-code>
+```
+
 </docs-step>
 
 </docs-workflow>
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
index a27bbb42334..f5a40baab70 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
@@ -12,30 +12,30 @@ In this activity, you'll learn how to use the `input()` function to send informa
 
 To create an `input` property, add the `input()` function to initialize a property of a component class:
 
-<docs-code header="user.ts" language="ts">
+```ts {header:"user.ts"}
 class User {
   occupation = input<string>();
 }
-</docs-code>
+```
 
 When you are ready to pass in a value through an `input`, values can be set in templates using the attribute syntax. Here's an example:
 
-<docs-code header="app.ts" language="angular-ts" highlight="[3]">
+```angular-ts {header:"app.ts", highlight:[3]}
 @Component({
   ...
   template: `<app-user occupation="Angular Developer"></app-user>`
 })
 export class App {}
-</docs-code>
+```
 
 The `input` function returns an `InputSignal`. You can read the value by calling the signal.
 
-<docs-code header="user.ts" language="angular-ts">
+```angular-ts {header:"user.ts"}
 @Component({
   ...
   template: `<p>The user's occupation is {{occupation()}}</p>`
 })
-</docs-code>
+```
 
 <docs-workflow>
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
index a099142263e..185cef66099 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
@@ -12,25 +12,25 @@ In this activity, you'll learn how to use the `output()` function to communicate
 
 To create the communication path from child to parent components, use the `output` function to initialize a class property.
 
-<docs-code header="child.ts" language="ts">
+```ts {header:"child.ts"}
 @Component({...})
 class Child {
   incrementCountEvent = output<number>();
 }
-</docs-code>
+```
 
 Now the component can generate events that can be listened to by the parent component. Trigger events by calling the `emit` method:
 
-<docs-code header="child.ts" language="ts">
+```ts {header:"child.ts"}
 class Child {
   ...
 
-onClick() {
-this.count++;
-this.incrementCountEvent.emit(this.count);
+  onClick() {
+    this.count++;
+    this.incrementCountEvent.emit(this.count);
+  }
 }
-}
-</docs-code>
+```
 
 The emit function will generate an event with the same type as defined by the `output`.
 
@@ -45,11 +45,11 @@ Update `child.ts` by adding an output property called `addItemEvent`, be sure to
 <docs-step title="Complete `addItem` method">
 In `child.ts` update the `addItem` method; use the following code as the logic:
 
-<docs-code header="child.ts" highlight="[2]" language="ts">
+```ts {header:"child.ts", highlight:[2]}
 addItem() {
   this.addItemEvent.emit('🐢');
 }
-</docs-code>
+```
 
 </docs-step>