main - 3202089 docs: specify language in code snippets (#31523)

Author: crisbeto

docs-content/guides/schematics.md.html

@@ -10,8 +10,8 @@ <h2 id="install-schematics" class="docs-header-link">
 <p>Using the command below will install Angular Material, the <a href="https://material.angular.dev/cdk">Component Dev Kit</a> (CDK),
 and <a href="https://angular.dev/guide/animations">Angular Animations</a> in your project. Then it will run the
 installation schematic.</p>
-<pre><code>ng add @angular/material</code></pre><p>In case you just want to install the <code>@angular/cdk</code>, there are also schematics for the <a href="https://material.angular.dev/cdk">Component Dev Kit</a></p>
-<pre><code>ng add @angular/cdk</code></pre><p>The Angular Material <code>ng add</code> schematic helps you set up an Angular CLI project that uses Material. Running <code>ng add</code> will:</p>
+<pre><code class="language-bash">ng add @angular/material</code></pre><p>In case you just want to install the <code>@angular/cdk</code>, there are also schematics for the <a href="https://material.angular.dev/cdk">Component Dev Kit</a></p>
+<pre><code class="language-bash">ng add @angular/cdk</code></pre><p>The Angular Material <code>ng add</code> schematic helps you set up an Angular CLI project that uses Material. Running <code>ng add</code> will:</p>
 <ul>
 <li>Ensure <a href="guide/getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations">project dependencies</a> are placed in <code>package.json</code></li>
 <li>Add either a prebuilt theme or a custom theme</li>
@@ -84,49 +84,49 @@ <h3 id="address-form-schematic" class="docs-header-link">
 <li>Material Design radio controls</li>
 <li>Material Design buttons</li>
 </ul>
-<pre><code>ng generate @angular/material:address-form <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/material:address-form &lt;component-name&gt;</code></pre>
         <h3 id="navigation-schematic" class="docs-header-link">
           <span header-link="navigation-schematic"></span>
           Navigation schematic
         </h3>
       <p>The <code>navigation</code> schematic will create a new component that includes
 a toolbar with the app name, and a responsive side nav based on Material
 breakpoints.</p>
-<pre><code>ng generate @angular/material:navigation <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/material:navigation &lt;component-name&gt;</code></pre>
         <h3 id="table-schematic" class="docs-header-link">
           <span header-link="table-schematic"></span>
           Table schematic
         </h3>
       <p>The table schematic will create a component that renders an Angular Material <code>&lt;table&gt;</code> which has
 been pre-configured with a datasource for sorting and pagination.</p>
-<pre><code>ng generate @angular/material:table <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/material:table &lt;component-name&gt;</code></pre>
         <h3 id="dashboard-schematic" class="docs-header-link">
           <span header-link="dashboard-schematic"></span>
           Dashboard schematic
         </h3>
       <p>The <code>dashboard</code> schematic will create a new component that contains
 a dynamic grid list of Material Design cards.</p>
-<pre><code>ng generate @angular/material:dashboard <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/material:dashboard &lt;component-name&gt;</code></pre>
         <h3 id="tree-schematic" class="docs-header-link">
           <span header-link="tree-schematic"></span>
           Tree schematic
         </h3>
       <p>The <code>tree</code> schematic can be used to quickly generate an Angular component that uses the Angular
 Material <code>&lt;mat-tree&gt;</code> component to visualize a nested folder structure.</p>
-<pre><code>ng generate @angular/material:tree <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/material:tree &lt;component-name&gt;</code></pre>
         <h3 id="drag-and-drop-schematic" class="docs-header-link">
           <span header-link="drag-and-drop-schematic"></span>
           Drag and Drop schematic
         </h3>
       <p>The <code>drag-drop</code> schematic is provided by the <code>@angular/cdk</code> and can be used to generate a component
 that uses the CDK drag and drop directives.</p>
-<pre><code>ng generate @angular/cdk:drag-drop <component-name></code></pre>
+<pre><code class="language-bash">ng generate @angular/cdk:drag-drop &lt;component-name&gt;</code></pre>
         <h3 id="material-3-theme-schematic" class="docs-header-link">
           <span header-link="material-3-theme-schematic"></span>
           Material 3 Theme schematic
         </h3>
       <p>The <code>theme-color</code> schematic will generate a file with Material 3 palettes from the specified colors
 that can be used in a theme file. It also generates high contrast color override mixins if
 specified.</p>
-<pre><code>ng generate @angular/material:theme-color</code></pre><p>Learn more about this schematic in its <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md">documentation</a>.</p>
+<pre><code class="language-bash">ng generate @angular/material:theme-color</code></pre><p>Learn more about this schematic in its <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md">documentation</a>.</p>
 </div>