docs: replace <docs-code> shell examples with fenced shell code blocks

Updated shell command examples to use fenced code blocks (```shell) instead of <docs-code> components, improving formatting consistency and aligning with current documentation standards.

adev/src/content/guide/animations/overview.md

@@ -82,11 +82,9 @@ HELPFUL: Let's create a new `open-close` component to animate with simple transi
 
 Run the following command in terminal to generate the component:
 
-<docs-code language="shell">
-
+```shell
 ng g component open-close
-
-</docs-code>
+```
 
 This will create the component at `src/app/open-close.component.ts`.
 

adev/src/content/guide/aria/overview.md

@@ -9,9 +9,9 @@ Angular Aria is a collection of headless, accessible directives that implement c
 
 ## Installation
 
-<docs-code language="shell">
+```shell
   ng add @angular/aria
-</docs-code>
+```
 
 ## Showcase / Demonstration
 

adev/src/content/guide/directives/attribute-directives.md

@@ -8,11 +8,9 @@ This section walks you through creating a highlight directive that sets the back
 
 1. To create a directive, use the CLI command [`ng generate directive`](tools/cli/schematics).
 
-   <docs-code language="shell">
-
+   ```shell
    ng generate directive highlight
-
-   </docs-code>
+   ```
 
    The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
 

adev/src/content/guide/drag-drop.md

@@ -21,9 +21,9 @@ For the full API reference, please see the [Angular CDK's drag and drop API refe
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ### Importing drag and drop
 

adev/src/content/guide/forms/reactive-forms.md

@@ -114,9 +114,9 @@ The following example shows how to manage multiple form control instances in a s
 
 Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package.
 
-<docs-code language="shell">
+```shell
 ng generate component ProfileEditor
-</docs-code>
+```
 
 <docs-code header="profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
 

adev/src/content/guide/i18n/import-global-variants.md

@@ -4,11 +4,9 @@ The [Angular CLI][CliMain] automatically includes locale data if you run the [`n
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="shell">
-
+```shell
 ng build --localize
-
-</docs-code>
+```
 
 HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\).
 The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command.

adev/src/content/guide/routing/router-tutorial.md

@@ -28,9 +28,9 @@ This application will have two components: _crisis-list_ and _heroes-list_.
 
 1. Create a new Angular project, _angular-router-sample_.
 
-   <docs-code language="shell">
+   ```shell
    ng new angular-router-sample
-   </docs-code>
+   ```
 
    When prompted with `Would you like to add Angular routing?`, select `N`.
 
@@ -41,9 +41,9 @@ This application will have two components: _crisis-list_ and _heroes-list_.
 1. From your terminal, navigate to the `angular-router-sample` directory.
 1. Create a component, _crisis-list_.
 
-<docs-code language="shell">
+```shell
 ng generate component crisis-list
-</docs-code>
+```
 
 1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML.
 
@@ -51,9 +51,9 @@ ng generate component crisis-list
 
 1. Create a second component, _heroes-list_.
 
-<docs-code language="shell">
+```shell
 ng generate component heroes-list
-</docs-code>
+```
 
 1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML.
 
@@ -65,9 +65,9 @@ ng generate component heroes-list
 
 1. Verify that your new application runs as expected by running the `ng serve` command.
 
-<docs-code language="shell">
+```shell
 ng serve
-</docs-code>
+```
 
 1. Open a browser to `http://localhost:4200`.
 
@@ -238,9 +238,9 @@ In this section, you'll create a 404 page and update your route configuration to
 
 1. From the terminal, create a new component, `PageNotFound`.
 
-<docs-code language="shell">
+```shell
 ng generate component page-not-found
-</docs-code>
+```
 
 1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML.
 

adev/src/content/guide/tailwind.md

@@ -8,10 +8,10 @@
 
 First, create a new Angular project if you don't have one set up already.
 
-<docs-code language="shell">
+```shell
 ng new my-project
 cd my-project
-</docs-code>
+```
 
 ### 2. Install Tailwind CSS
 

adev/src/content/guide/testing/component-harnesses-testing-environments.md

@@ -19,9 +19,9 @@ Otherwise, to add support for other environments, you need to define how to inte
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Creating a `TestElement` implementation
 

adev/src/content/guide/testing/components-basics.md

@@ -34,11 +34,9 @@ The CLI creates an initial test file for you by default when you ask it to gener
 
 For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder \(with inline template and styles\):
 
-<docs-code language="shell">
-
+```shell
 ng generate component banner --inline-template --inline-style --module app
-
-</docs-code>
+```
 
 It also generates an initial test file for the component, `banner-external.component.spec.ts`, that looks like this:
 

adev/src/content/guide/testing/creating-component-harnesses.md

@@ -14,9 +14,9 @@ For components that appear in only one place, such as a page in an application,
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Extending `ComponentHarness`
 

adev/src/content/guide/testing/karma.md

@@ -116,9 +116,7 @@ The Angular CLI takes care of Jasmine and Karma configuration for you. It constr
 If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
 
 ```shell
-
 ng generate config karma
-
 ```
 
 HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).

adev/src/content/guide/testing/using-component-harnesses.md

@@ -8,9 +8,9 @@ TIP: This guide assumes you've already read the [component harnesses overview gu
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Test harness environments and loaders