docs: Updates tutorial syntaxis highlight

Author: SkyZeroZx

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>

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,15 +74,15 @@ 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) {
   <p>Placeholder for comments</p>
 } @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>
 

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,15 +51,15 @@ 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>
 
 <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:
 

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md

@@ -32,65 +32,65 @@ 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>
 
 <docs-step title="Add a loading block">
 
 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 {
   <p>Future comments</p>
 } @loading {
   <p>Loading comments...</p>
 }
-</docs-code>
+```
 
 </docs-step>
 
 <docs-step title="Add a minimum duration">
 
 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 {
   <p>Future comments</p>
 } @loading (minimum 2s) {
   <p>Loading comments...</p>
 }
-</docs-code>
+```
 
 </docs-step>
 
 <docs-step title="Add a viewport trigger">
 
 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>
 
 <docs-step title="Add content">
 
 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.
 

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>
 

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md

@@ -33,15 +33,15 @@ 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';
 
 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>
 

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>
 

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).
 

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,15 +29,15 @@ To display the input value in a template, you can use the interpolation syntax `
 export class User {
   favoriteFramework = '';
 }
-</docs-code>
+```
 
 </docs-step>
 
 <docs-step title="Retrieve the value of an input field">
 
 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>