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

After the changes to the `lang-none` styling in angular#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 angular#41984

PR Close angular#41986

Author: petebacondarwin

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" class="code-shell">
+<code-example language="sh">
 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,23 +385,23 @@ 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
 
 </code-example>
 
 Build your application for production _including the source maps_
 
-<code-example language="none" class="code-shell">
+<code-example language="sh">
 
   ng build --source-map
 
 </code-example>
 
 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