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 27e183330e)

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'),
     };
   }
 

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

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 {

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

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>