build(docs-infra): ensure that terminal code snippets render correctly (#41986)

After the changes to the `lang-none` styling in #41335, code snippets marked with

```
language="none" class="code-shell"
```

were being styled with the same foreground and background colours.

It turns out that most of these ought to be marked `language="sh"`
in which case the `code-shell` style became redundant and has been
removed.

Fixes #41984

PR Close #41986

aio/content/cli/usage-analytics-gathering.md

@@ -20,29 +20,27 @@ This ID is a string that looks like `UA-123456-12`.
 You can choose to use a descriptive string as the key value, or be assigned a random key when you run the CLI command.
 For example, the following command adds a configuration key named "tracking".
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng config --global cli.analyticsSharing.tracking UA-123456-12
 </code-example>
 
 To turn off this feature, run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng config --global --remove cli.analyticsSharing
 </code-example>
 
-
 ## Per user tracking
 
 You can add a custom user ID to the global configuration, in order to identify unique usage of commands and flags.
 If that user enables CLI analytics for their own project, your analytics display tracks and labels their individual usage.
 
-
+<code-example language="sh">
-<code-example language="sh" class="code-shell">
 ng config --global cli.analyticsSharing.user SOME_USER_NAME
 </code-example>
 
 To generate a new random user ID, run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng config --global cli.analyticsSharing.user ""
 </code-example>

aio/content/guide/attribute-directives.md

@@ -14,7 +14,7 @@ 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`](cli/generate).
 
-  <code-example language="sh" class="code-shell">
+  <code-example language="sh">
 ng generate directive highlight
 </code-example>
 

aio/content/guide/browser-support.md

@@ -87,7 +87,7 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS
 
 For example, if you need the optional [web animations polyfill](https://caniuse.com/web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   # install the optional web animations polyfill
   npm install --save web-animations-js
 </code-example>

aio/content/guide/build.md

@@ -94,6 +94,7 @@ export class AppComponent {
   title = 'app works!';
 }
 ```
+
 {@a file-replacement}
 
 ## Configure target-specific file replacements
@@ -140,7 +141,7 @@ Any option that your build supports can be overridden in a build target configur
 
 To build using the staging configuration, run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
  ng build --configuration=staging
 </code-example>
 
@@ -503,7 +504,7 @@ module.exports = PROXY_CONFIG;
 If you work behind a corporate proxy, the backend cannot directly proxy calls to any URL outside your local network.
 In this case, you can configure the backend proxy to redirect calls through your corporate proxy using an agent:
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 npm install --save-dev https-proxy-agent
 </code-example>
 

aio/content/guide/component-styles.md

@@ -170,7 +170,7 @@ They are _not inherited_ by any components nested within the template nor by any
 
 The Angular CLI command [`ng generate component`](cli/generate) defines an empty `styles` array when you create the component with the `--inline-style` flag.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng generate component hero-app --inline-style
 </code-example>
 
@@ -199,7 +199,7 @@ They are _not inherited_ by any components nested within the template nor by any
 
 When you use the Angular CLI command [`ng generate component`](cli/generate) without the `--inline-style` flag, it creates an empty styles file for you and references that file in the component's generated `styleUrls`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng generate component hero-app
 </code-example>
 

aio/content/guide/dependency-injection.md

@@ -16,7 +16,7 @@ See the <live-example></live-example> for a working example containing the code
 
 To generate a new `HeroService` class in the `src/app/heroes` folder use the following [Angular CLI](cli) command.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng generate service heroes/hero
 </code-example>
 

aio/content/guide/deployment.md

@@ -29,7 +29,7 @@ You will need two terminals to get the live-reload experience.
 
 * On the first terminal, run the [`ng build` command](cli/build) in *watch* mode to compile the application to the `dist` folder.
 
-  <code-example language="none" class="code-shell">
+  <code-example language="sh">
 
    ng build --watch
 
@@ -39,7 +39,7 @@ You will need two terminals to get the live-reload experience.
 
 * On the second terminal, install a web server (such as [lite-server](https://github.com/johnpapa/lite-server)), and run it against the output folder. For example:
 
-  <code-example language="none" class="code-shell">
+  <code-example language="sh">
 
    lite-server --baseDir="dist/project-name"
 
@@ -61,7 +61,7 @@ When you add a package with deployment capability, it'll automatically update yo
 
 For example, the following command automatically deploys a project to Firebase.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 ng add @angular/fire
 ng deploy
 </code-example>
@@ -90,13 +90,12 @@ For the simplest deployment, create a production build and copy the output direc
 
 1. Start with the production build:
 
-  <code-example language="none" class="code-shell">
+  <code-example language="sh">
 
     ng build
 
   </code-example>
 
-
 2. Copy _everything_ within the output folder (`dist/project-name/` by default) to a folder on the server.
 
 3. Configure the server to redirect requests for missing files to `index.html`.
@@ -121,6 +120,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art
   git branch -M main
   git push -u origin main
   ```
+
   When you paste these commands from GitHub, they run automatically.
 
 1. Create and check out a `git` branch named `gh-pages`.
@@ -133,7 +133,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art
 
   Be sure to include the slashes on either side of your project name as in `/your_project_name/`.
 
-  <code-example language="none" class="code-shell">
+  <code-example language="sh">
 
     ng build --output-path docs --base-href /your_project_name/
 
@@ -222,7 +222,7 @@ modified to serve `index.html`:
 
 * [Ruby](https://www.ruby-lang.org/): create a Ruby server using ([sinatra](http://sinatrarb.com/)) with a basic Ruby file that configures the server `server.rb`:
 
-  ``` ruby
+  ```ruby
   require 'sinatra'
 
   # Folder structure
@@ -385,7 +385,7 @@ tool is a great way to inspect the generated JavaScript bundles after a producti
 
 Install `source-map-explorer`:
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
   npm install source-map-explorer --save-dev
 
@@ -393,7 +393,7 @@ Install `source-map-explorer`:
 
 Build your application for production _including the source maps_
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
   ng build --source-map
 
@@ -401,7 +401,7 @@ Build your application for production _including the source maps_
 
 List the generated bundles in the `dist/project-name/` folder.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
   ls dist/project-name/*.js
 
@@ -410,7 +410,7 @@ List the generated bundles in the `dist/project-name/` folder.
 Run the explorer to generate a graphical representation of one of the bundles.
 The following example displays the graph for the _main_ bundle.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
   node_modules/.bin/source-map-explorer dist/project-name/main*
 
@@ -657,7 +657,7 @@ In `angular.json` add two new configuration sections under the `build` and `serv
 
 You can then run the `ng serve` command with this configuration. Make sure to replace `<app-name>` (in `"<app-name>:build:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your application name is `myAngularApp` the configuration will become `"browserTarget": "myAngularApp:build:es5"`.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
 ng serve --configuration es5
 
@@ -698,7 +698,7 @@ Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with th
 
 You can then run the tests with this configuration
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
 ng test --configuration es5
 

aio/content/guide/docs-style-guide.md

@@ -249,16 +249,16 @@ The <code class="no-auto-link">item</code> property is `true`.
 
 Ideally, you should source code snippets [from working sample code](#from-code-samples), though there are times when an inline snippet is necessary.
 
-For terminal input and output, place the content between `<code-example>` tags, set the CSS class to `code-shell`, and set the language attribute to `sh` as in this example:
+For terminal input and output, place the content between `<code-example>` tags and set the language attribute to `sh` as in this example:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
   npm start
 
 </code-example>
 
 ```html
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
   npm start
 
@@ -405,7 +405,7 @@ Specify the `<code-example>` output with the following attributes:
   The `number` option starts line numbering at the given value.
   For example, `linenums=4` sets the starting line number to 4.
 
-* `class`: code snippets can be styled with the CSS classes `no-box`, `code-shell`, and `avoid`.
+* `class`: code snippets can be styled with the CSS classes `no-box` and `avoid`.
 
 * `hideCopy`: hides the copy button.
 

aio/content/guide/i18n.md

@@ -69,7 +69,7 @@ The following are optional practices that may be required in special cases:
 
 To take advantage of Angular's localization features, use the Angular CLI to add the `@angular/localize` package to your project:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng add @angular/localize
 </code-example>
 
@@ -343,7 +343,7 @@ You can optionally change the location, format, and name.
 
 To extract the source language file, open a terminal window, change to the root directory of your app project, and run the following CLI command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng extract-i18n
 </code-example>
 
@@ -362,7 +362,7 @@ Angular 9 uses the source locale configured in your app's [workspace configurati
 
 To create a file in the `src/locale` directory, specify the output path as an option, as shown in the following example:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng extract-i18n --output-path src/locale
 </code-example>
 
@@ -378,7 +378,7 @@ The `extract-i18n` command can read and write files in three translation formats
 
 Specify the translation format explicitly with the `--format` command option, as shown in the following examples:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng extract-i18n  --format=xlf
 ng extract-i18n  --format=xlf2
 ng extract-i18n  --format=xmb
@@ -396,7 +396,7 @@ ng extract-i18n  --format=xmb
 To change the name of the source language file generated by the extraction tool, use
 the `--outFile` command option:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng extract-i18n --out-file source.xlf
 </code-example>
 
@@ -641,7 +641,7 @@ You can set the `"localize"` property as a shared configuration that all the con
 You can also use the `--localize` option with the [`ng build`](/cli/build "CLI reference for ng build") command and your existing `production` configuration.
 The CLI builds all locales defined in the build configuration, which is similar to setting the `"localize"` option to `true` as described in the previous section.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng build --localize
 </code-example>
 
@@ -677,7 +677,7 @@ To apply specific build options to only one locale, you can create a custom loca
 You can then pass this configuration to the `ng serve` or `ng build` commands.
 The following shows how to serve the French language file created in the example for this guide:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng serve --configuration=fr
 </code-example>
 
@@ -689,7 +689,7 @@ You can use the CLI development server (`ng serve`), but only with a single loca
 
 For production builds, you can use configuration composition to execute both configurations:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng build --configuration=production,fr
 </code-example>
 

aio/content/guide/lazy-loading-ngmodules.md

@@ -267,7 +267,7 @@ Create a resolver service.
 With the CLI, the command to generate a service is as follows:
 
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate service <service-name>
 </code-example>
 

aio/content/guide/npm-packages.md

@@ -102,11 +102,11 @@ The packages listed in the `devDependencies` section of `package.json` help you
 
 To add a new `devDependency`, use either one of the following commands:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   npm install --save-dev &lt;package-name&gt;
 </code-example>
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   yarn add --dev &lt;package-name&gt;
 </code-example>
 

aio/content/guide/reactive-forms.md

@@ -50,7 +50,7 @@ To use reactive form controls, import `ReactiveFormsModule` from the `@angular/f
 
 Use the [CLI command](cli "Using the Angular command-line interface.") `ng generate` to generate a component in your project to host the control.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
   ng generate component NameEditor
 
@@ -146,7 +146,7 @@ Just as a form control instance gives you control over a single input field, a f
 
 Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
   ng generate component ProfileEditor
 

aio/content/guide/router-tutorial-toh.md

@@ -130,7 +130,7 @@ Begin with a basic version of the app that navigates between two empty views.
 
 Generate a sample application with the Angular CLI.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng new angular-router-sample
 </code-example>
 
@@ -152,11 +152,11 @@ The first configuration defines an array of two routes with minimal paths leadin
 
 Generate the `CrisisList` and `HeroList` components so that the router has something to render.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component crisis-list
 </code-example>
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component hero-list
 </code-example>
 
@@ -250,7 +250,7 @@ Instead of adding the `"/sidekicks"` route, define a `wildcard` route and have i
 
 Create the `PageNotFoundComponent` to display when users visit invalid URLs.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component page-not-found
 </code-example>
 
@@ -550,7 +550,7 @@ The file includes an empty `Routes` object that you can fill with routes to diff
 
 Create an `AppRouting` module in the `/app` folder to contain the routing configuration.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate module app-routing --module app --flat
 </code-example>
 
@@ -626,7 +626,7 @@ Follow these steps:
 
 * To manage the heroes, create a `HeroesModule` with routing in the heroes folder and register it with the root `AppModule`.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate module heroes/heroes --module app --flat --routing
 </code-example>
 
@@ -1564,7 +1564,7 @@ If your app had many feature areas, the app component trees might look like this
 
 Generate a `CrisisCenter` component in the `crisis-center` folder:
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component crisis-center/crisis-center
 </code-example>
 
@@ -1585,7 +1585,7 @@ Like most shells, the `CrisisCenterComponent` class is minimal because it has no
 
 As a host page for the "Crisis Center" feature, generate a `CrisisCenterHome` component in the `crisis-center` folder.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component crisis-center/crisis-center-home
 </code-example>
 
@@ -1758,7 +1758,7 @@ They differ in a few key respects.
 
 Generate a new component to compose the message.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component compose-message
 </code-example>
 
@@ -1966,25 +1966,25 @@ Start by adding a new feature module named `AdminModule`.
 
 Generate an `admin` folder with a feature module file and a routing configuration file.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate module admin --routing
 </code-example>
 
 Next, generate the supporting components.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component admin/admin-dashboard
 </code-example>
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component admin/admin
 </code-example>
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component admin/manage-crises
 </code-example>
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component admin/manage-heroes
 </code-example>
 
@@ -2161,7 +2161,7 @@ login page when they try to enter the admin area.
 
 Generate an `AuthGuard` in the `auth` folder.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate guard auth/auth
 </code-example>
 
@@ -2184,7 +2184,7 @@ Make the `AuthGuard` mimic authentication.
 
 The `AuthGuard` should call an application service that can login a user and retain information about the current user. Generate a new `AuthService` in the `auth` folder:
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate service auth/auth
 </code-example>
 
@@ -2224,7 +2224,7 @@ Returning a `UrlTree` tells the `Router` to cancel the current navigation and sc
 You need a `LoginComponent` for the user to log in to the app. After logging in, you'll redirect to the stored URL if available, or use the default URL.
 There is nothing new about this component or the way you use it in the router configuration.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component auth/login
 </code-example>
 
@@ -2323,7 +2323,7 @@ You could wait for the user's answer with synchronous, blocking code, however, t
 
 Generate a `Dialog` service to handle user confirmation.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate service dialog
 </code-example>
 
@@ -2338,7 +2338,7 @@ It returns an `Observable` that resolves when the user eventually decides what t
 
 Generate a guard that checks for the presence of a `canDeactivate()` method in a component&mdash;any component.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate guard can-deactivate
 </code-example>
 
@@ -2400,7 +2400,7 @@ A `CrisisDetailResolver` service could retrieve a `Crisis` or navigate away, if
 
 Generate a `CrisisDetailResolver` service file within the `Crisis Center` feature area.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate service crisis-center/crisis-detail-resolver
 </code-example>
 
@@ -2774,7 +2774,7 @@ Set the `data.preload` flag in the `crisis-center` route in the `AppRoutingModul
 
 Generate a new `SelectivePreloadingStrategy` service.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate service selective-preloading-strategy
 </code-example>
 

aio/content/guide/router.md

@@ -25,7 +25,7 @@ For a more in-depth experience of building an Angular app, see the [Tour of Hero
 The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
 The app name in the following example is `routing-app`.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng new routing-app --routing
 </code-example>
 
@@ -36,14 +36,14 @@ For this example, accept the default of `CSS`.
 
 To use the Angular router, an app needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where `first` is the name of your component:
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component first
 </code-example>
 
 Repeat this step for a second component but give it a different name.
 Here, the new name is `second`.
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate component second
 </code-example>
 
@@ -376,7 +376,7 @@ To use route guards, consider using [component-less routes](api/router/Route#com
 Create a service for your guard:
 
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
   ng generate guard your-guard
 </code-example>
 

aio/content/guide/setup-local.md

@@ -1,10 +1,8 @@
 # Setting up the local environment and workspace
 
-
 This guide explains how to set up your environment for Angular development using the [Angular CLI tool](cli "CLI command reference").
 It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.
 
-
 <div class="callout is-helpful">
 <header>Try Angular without local setup</header>
 
@@ -60,7 +58,7 @@ You use the Angular CLI to create projects, generate application and library cod
 
 To install the Angular CLI, open a terminal window and run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   npm install -g @angular/cli
 </code-example>
 
@@ -74,7 +72,7 @@ To create a new workspace and initial starter app:
 
 1. Run the CLI command `ng new` and provide the name `my-app`, as shown here:
 
-    <code-example language="sh" class="code-shell">
+   <code-example language="sh">
       ng new my-app
 
     </code-example>
@@ -95,7 +93,7 @@ The Angular CLI includes a server, so that you can build and serve your app loca
 
 1. Run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   cd my-app
   ng serve --open
 </code-example>

aio/content/guide/strict-mode.md

@@ -15,7 +15,7 @@ You can apply these settings at the workspace and project level.
 
 Using the basic `ng new` command to create a new workspace and application automatically uses strict mode, as in the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
 ng new [project-name]
 
@@ -23,7 +23,7 @@ ng new [project-name]
 
 To create a new application in the strict mode within an existing non-strict workspace, run the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 
 ng generate application [project-name] --strict
 

aio/content/guide/testing-code-coverage.md

@@ -7,16 +7,16 @@ Code coverage reports show you any parts of your code base that may not be prope
 
 <div class="alert is-helpful">
 
-  For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.
+For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.
 
-  For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
+For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
 
 </div>
 
 
 To generate a coverage report run the following command in the root of your project.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng test --no-watch --code-coverage
 </code-example>
 

aio/content/guide/testing-components-basics.md

@@ -145,7 +145,7 @@ generate a new component.
 
 For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder (with inline template and styles):
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 ng generate component banner --inline-template --inline-style --module app
 </code-example>
 

aio/content/guide/testing-components-scenarios.md

@@ -162,7 +162,7 @@ However, if you run the tests in a **non-CLI environment**,
 tests of this component may fail.
 For example, if you run the `BannerComponent` tests in a web coding environment such as [plunker](https://plnkr.co/), you'll see a message like this one:
 
-<code-example language="sh" class="code-shell" hideCopy>
+<code-example language="sh" hideCopy>
 Error: This test module uses the component BannerComponent
 which is using a "templateUrl" or "styleUrls", but they were never compiled.
 Please call "TestBed.compileComponents" before your test.
@@ -1452,7 +1452,7 @@ because the CLI compiles the application before running the tests.
 
 If you run tests in a **non-CLI environment**, the tests may fail with a message like this one:
 
-<code-example language="sh" class="code-shell" hideCopy>
+<code-example language="sh" hideCopy>
 Error: This test module uses the component BannerComponent
 which is using a "templateUrl" or "styleUrls", but they were never compiled.
 Please call "TestBed.compileComponents" before your test.
@@ -1497,7 +1497,7 @@ If you neglect to make the test function async
 (e.g., forget to use the `async` keyword as described below),
 you'll see this error message
 
-<code-example language="sh" class="code-shell" hideCopy>
+<code-example language="sh" hideCopy>
 Error: ViewDestroyedError: Attempt to use a destroyed view
 </code-example>
 

aio/content/guide/testing.md

@@ -36,7 +36,7 @@ The Angular CLI downloads and installs everything you need to test an Angular ap
 The project you create with the CLI is immediately ready to test.
 Just run the [`ng test`](cli/test) CLI command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng test
 </code-example>
 
@@ -45,7 +45,7 @@ and launches the [Karma test runner](https://karma-runner.github.io).
 
 The console output looks a bit like this:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 10% building modules 1/1 modules 0 active
 ...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
 ...INFO [launcher]: Launching browser Chrome ...
@@ -324,7 +324,7 @@ customLaunchers: {
 
 Now you can run the following command to use the `--no-sandbox` flag:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng test --no-watch --no-progress --browsers=ChromeHeadlessCI
 </code-example>
 

aio/content/guide/upgrade-setup.md

@@ -31,8 +31,7 @@ Setting up a new project on your machine is quick and easy with the [QuickStart
 
 Perform the _clone-to-launch_ steps with these terminal commands.
 
-
+<code-example language="sh">
-<code-example language="sh" class="code-shell">
   git clone https://github.com/angular/quickstart.git quickstart
   cd quickstart
   npm install
@@ -60,8 +59,7 @@ Perform the _clone-to-launch_ steps with these terminal commands.
 <a href="https://github.com/angular/quickstart/archive/master.zip" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
 and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
 
-
+<code-example language="sh">
-<code-example language="sh" class="code-shell">
   cd quickstart
   npm install
   npm start
@@ -106,7 +104,7 @@ Open a terminal window in the project folder and enter the following commands fo
 
 ### OS/X (bash)
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   xargs rm -rf &lt; non-essential-files.osx.txt
   rm src/app/*.spec*.ts
   rm non-essential-files.osx.txt
@@ -117,7 +115,7 @@ Open a terminal window in the project folder and enter the following commands fo
 
 ### Windows
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   for /f %i in (non-essential-files.txt) do del %i /F /S /Q
   rd .git /s /q
   rd e2e /s /q

aio/content/tutorial/toh-pt0.md

@@ -29,7 +29,7 @@ To create a new workspace and an initial app project:
   1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.
   2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
 
-  <code-example language="sh" class="code-shell">
+  <code-example language="sh">
      ng new angular-tour-of-heroes
   </code-example>
 
@@ -50,7 +50,7 @@ The initial app project contains a simple Welcome app, ready to run.
 
 Go to the workspace directory and launch the application.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   cd angular-tour-of-heroes
   ng serve --open
 </code-example>

aio/content/tutorial/toh-pt1.md

@@ -14,7 +14,7 @@ and place that component in the application shell.
 
 Using the Angular CLI, generate a new component named `heroes`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate component heroes
 </code-example>
 
@@ -146,7 +146,7 @@ Notice that the app stopped working when you added `[(ngModel)]`.
 To see the error, open the browser development tools and look in the console
 for a message like
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
 Template parse errors:
 Can't bind to 'ngModel' since it isn't a known property of 'input'.
 </code-example>

aio/content/tutorial/toh-pt2.md

@@ -153,7 +153,7 @@ After the browser refreshes, the application is broken.
 
 Open the browser developer tools and look in the console for an error message like this:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
 </code-example>
 

aio/content/tutorial/toh-pt3.md

@@ -20,7 +20,7 @@ The `HeroDetailComponent` will present details of a selected hero.
 
 Use the Angular CLI to generate a new component named `hero-detail`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate component hero-detail
 </code-example>
 

aio/content/tutorial/toh-pt4.md

@@ -34,7 +34,7 @@ when the user clicks a hero.
 
 Using the Angular CLI, create a service called `hero`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate service hero
 </code-example>
 
@@ -265,7 +265,7 @@ This section guides you through the following:
 
 Use the CLI to create the `MessagesComponent`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate component messages
 </code-example>
 
@@ -284,7 +284,7 @@ You should see the default paragraph from `MessagesComponent` at the bottom of t
 
 Use the CLI to create the `MessageService` in `src/app`.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate service message
 </code-example>
 

aio/content/tutorial/toh-pt5.md

@@ -28,7 +28,7 @@ By convention, the module class name is `AppRoutingModule` and it belongs in the
 
 Use the CLI to generate it.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate module app-routing --flat --module=app
 </code-example>
 
@@ -120,7 +120,7 @@ because `AppModule` imports `AppRoutingModule` which exported `RouterModule`. Th
 
 You should still be running with this CLI command.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng serve
 </code-example>
 
@@ -174,7 +174,7 @@ So far there's only the heroes view.
 
 Add a `DashboardComponent` using the CLI:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate component dashboard
 </code-example>
 

aio/content/tutorial/toh-pt6.md

@@ -50,7 +50,7 @@ If you're coding along with this tutorial, stay here and add the In-memory Web A
 
 Install the In-memory Web API package from npm with the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   npm install angular-in-memory-web-api --save
 </code-example>
 
@@ -71,7 +71,7 @@ that primes the in-memory database.
 
 Generate the class `src/app/in-memory-data.service.ts` with the following command:
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate service InMemoryData
 </code-example>
 
@@ -406,7 +406,7 @@ For this to work, the next step is to add a component with a selector that match
 
 Create a `HeroSearchComponent` with the CLI.
 
-<code-example language="sh" class="code-shell">
+<code-example language="sh">
   ng generate component hero-search
 </code-example>
 

aio/src/styles/2-modules/_code.scss

@@ -41,7 +41,7 @@ code-example {
   }
 
   // TERMINAL / SHELL TEXT STYLES
-  &.code-shell, &[language=sh], &[language=bash] {
+  &[language=sh], &[language=bash] {
     background-color: $darkgray;
   }
 
@@ -242,7 +242,7 @@ aio-code {
 /* SHELL / TERMINAL CODE BLOCKS */
 
 code-example {
-  &.code-shell, &[language=sh], &[language=bash] {
+  &[language=sh], &[language=bash] {
     .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
       color: $codegreen;
     }

aio/src/styles/_print.scss

@@ -70,7 +70,7 @@
     }
 
     code-example {
-        &.code-shell, &[language=sh], &[language=bash] {
+        &[language=sh], &[language=bash] {
             background: none;
 
             .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {