diff --git a/adev/src/content/reference/extended-diagnostics/NG8021.md b/adev/src/content/reference/extended-diagnostics/NG8021.md
index 11ca06700d2..2052b20c966 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8021.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8021.md
@@ -2,7 +2,7 @@
 
 This diagnostic detects unreachable or redundant triggers in `@defer` blocks.
 
-```typescript
+```angular-ts
 import {Component} from '@angular/core';
 
 @Component({
@@ -31,7 +31,7 @@ This diagnostic flags the following problematic patterns:
 
 **Bad — prefetch never runs**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on immediate; prefetch on idle) {
@@ -44,7 +44,7 @@ class MyComponent {}
 
 **Good — remove redundant prefetch**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on immediate) {
@@ -59,7 +59,7 @@ class MyComponent {}
 
 **Bad — prefetch is later than main**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on timer(100ms); prefetch on timer(3000ms)) {
@@ -72,7 +72,7 @@ class MyComponent {}
 
 **Bad — equal timing provides no benefit**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on timer(500ms); prefetch on timer(500ms)) {
@@ -85,7 +85,7 @@ class MyComponent {}
 
 **Good — prefetch fires earlier**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on timer(1000ms); prefetch on timer(500ms)) {
@@ -100,7 +100,7 @@ class MyComponent {}
 
 **Bad — identical viewport trigger**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     @defer (on viewport; prefetch on viewport) {
@@ -113,7 +113,7 @@ class MyComponent {}
 
 **Bad — identical interaction target**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     <button #loadBtn>Load</button>
@@ -127,7 +127,7 @@ class MyComponent {}
 
 **Good — remove redundant prefetch**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     <button #loadBtn>Load</button>
@@ -141,7 +141,7 @@ class MyComponent {}
 
 **Good — use different targets for prefetch and main**
 
-```typescript
+```angular-ts
 @Component({
   template: `
     <div #hoverArea>Hover to prefetch</div>
diff --git a/adev/src/content/reference/extended-diagnostics/NG8108.md b/adev/src/content/reference/extended-diagnostics/NG8108.md
index 3dda9066792..dede6b2a5a5 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8108.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8108.md
@@ -36,18 +36,21 @@ class MyComponent {}
 
 If a conditional is necessary, you can wrap the component in an `*ngIf`.
 
-```html
-import {Component} from '@angular/core'; @Component({ template: `
+```angular-ts
+import {Component} from '@angular/core';
 
-<div \*ngIf="hasUser; else noUser">
-  <user-viewer ngSkipHydration />
-</div>
+@Component({
+  template: `
+    <div *ngIf="hasUser; else noUser">
+      <user-viewer ngSkipHydration />
+    </div>
 
-<ng-template #noUser>
-  <user-viewer />
-</ng-template>
-
-`, }) class MyComponent {}
+    <ng-template #noUser>
+      <user-viewer />
+    </ng-template>
+  `,
+})
+class MyComponent {}
 ```
 
 ## Configuration requirements