From 14b5590f808ba90746dafbf28faac5d4468f0cd8 Mon Sep 17 00:00:00 2001
From: Shuaib Hasan Akib <akibh805@gmail.com>
Date: Sun, 26 Oct 2025 14:47:42 +0600
Subject: [PATCH] fix(docs-infra): preserve shell class for multifile code
 blocks

The ExampleViewer component was extracting only innerHTML from code
blocks in multifile examples, which lost the shell class applied by
the formatCode function. This caused the $ prompt to not appear for
shell commands in multifile blocks even when language="shell" was set.

Modified the Snippet interface to track shell language state and
updated getCodeSnippetsFromMultifileWrapper and getStandaloneCodeSnippet
methods to preserve the shell class. Updated example-viewer template
to conditionally apply the shell class to the code wrapper element.

Fixes inconsistency between standalone and multifile shell code blocks.

(cherry picked from commit 27e183330e867a8e759b0f2a8abcfc6d0cd2e9b6)
---
 .../components/viewers/docs-viewer/docs-viewer.component.ts   | 2 ++
 .../viewers/example-viewer/example-viewer.component.html      | 1 +
 adev/shared-docs/interfaces/code-example.ts                   | 2 ++
 .../shared/marked/extensions/docs-code/format/index.mts       | 4 ++--
 adev/src/content/introduction/installation.md                 | 4 ++++
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
index 956ce0e9352..76717c25830 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
+++ b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
@@ -221,6 +221,7 @@ export class DocViewer {
       name: tab.getAttribute('path') ?? tab.getAttribute('header') ?? '',
       sanitizedContent: this.sanitizer.bypassSecurityTrustHtml(tab.innerHTML),
       visibleLinesRange: tab.getAttribute('visibleLines') ?? undefined,
+      shell: tab.classList.contains('shell'),
     }));
   }
 
@@ -243,6 +244,7 @@ export class DocViewer {
         ? this.sanitizer.bypassSecurityTrustHtml(content.outerHTML)
         : '',
       visibleLinesRange: visibleLines,
+      shell: element.classList.contains('shell'),
     };
   }
 
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
index 2e73481c2ee..c22a2457807 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
@@ -97,6 +97,7 @@
       class="docs-example-viewer-code-wrapper"
       [class.docs-example-viewer-snippet]="view() === CodeExampleViewMode.SNIPPET"
       [class.docs-example-viewer-multi-file]="view() === CodeExampleViewMode.MULTI_FILE"
+      [class.shell]="snippetCode()?.shell"
     >
       <button docs-copy-source-code></button>
       @if (snippetCode()?.sanitizedContent; as content) {
diff --git a/adev/shared-docs/interfaces/code-example.ts b/adev/shared-docs/interfaces/code-example.ts
index 1643a205faf..46fe274109c 100644
--- a/adev/shared-docs/interfaces/code-example.ts
+++ b/adev/shared-docs/interfaces/code-example.ts
@@ -25,6 +25,8 @@ export interface Snippet {
   sanitizedContent: SafeHtml;
   /** Text in following format `start-end`. Start and end are numbers, based on them provided range of lines will be displayed in collapsed mode  */
   visibleLinesRange?: string;
+
+  shell?: boolean;
 }
 
 export interface ExampleMetadata {
diff --git a/adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/index.mts b/adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/index.mts
index 95bafb19111..b81e0e24c90 100644
--- a/adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/index.mts
+++ b/adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/index.mts
@@ -26,7 +26,7 @@ export interface CodeToken extends Tokens.Generic {
   path?: string;
   /* The example display header */
   header?: string;
-  /* Whether stling should include line numbers */
+  /* Whether styling should include line numbers */
   linenums?: boolean;
   /* The example path to determine diff (lines added/removed) */
   diff?: string;
@@ -41,7 +41,7 @@ export interface CodeToken extends Tokens.Generic {
   /* The lines to display highlighting on */
   highlight?: string;
 
-  /** The generated diff metadata if created in the code formating process. */
+  /** The generated diff metadata if created in the code formatting process. */
   diffMetadata?: DiffMetadata;
 
   // additional classes for the element
diff --git a/adev/src/content/introduction/installation.md b/adev/src/content/introduction/installation.md
index 4201488f90b..45d716d0817 100644
--- a/adev/src/content/introduction/installation.md
+++ b/adev/src/content/introduction/installation.md
@@ -35,21 +35,25 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
 <docs-code-multifile>
   <docs-code
     header="npm"
+    language="shell"
     >
     npm install -g @angular/cli
     </docs-code>
   <docs-code
     header="pnpm"
+    language="shell"
     >
     pnpm install -g @angular/cli
     </docs-code>
   <docs-code
     header="yarn"
+    language="shell"
     >
     yarn global add @angular/cli
     </docs-code>
   <docs-code
     header="bun"
+    language="shell"
     >
     bun install -g @angular/cli
     </docs-code>