docs(docs-infra): Fix prefer/avoid rule matching with word boundaries

Improve code block rule detection by adding word-boundary anchors.
Also update indentation for consistency.

Author: SkyZeroZx

adev/shared-docs/pipeline/shared/marked/extensions/docs-code/docs-code-block.mts

@@ -41,7 +41,7 @@ export const docsCodeBlockExtension = {
       const headerRule = /header\s*:\s*(['"`])([^'"`]+)\1/; // The 2nd capture matters here
       const highlightRule = /highlight\s*:\s*(.*)([^,])/;
       const hideCopyRule = /hideCopy/;
-      const preferRule = /(prefer|avoid)/;
+      const preferRule = /\b(prefer|avoid)\b/;
       const linenumsRule = /linenums/;
 
       const token: DocsCodeBlock = {

adev/shared-docs/pipeline/shared/marked/extensions/docs-code/docs-code.mts

@@ -32,7 +32,7 @@ const visibleLinesRule = /visibleLines="([^"]*)"/;
 const regionRule = /region="([^"]*)"/;
 const previewRule = /preview/;
 const hideCodeRule = /hideCode/;
-const preferRule = /(prefer|avoid)/;
+const preferRule = /\b(prefer|avoid)\b/;
 
 export const docsCodeExtension = {
   name: 'docs-code',

adev/src/content/introduction/essentials/signal-forms.md

@@ -189,7 +189,7 @@ When a user selects a radio button, the form `field` stores the value from that
 
 Select elements work with both static and dynamic options:
 
-```html
+```angular-html
 <!-- Static options -->
 <select [field]="form.country">
   <option value="">Select a country</option>

adev/src/content/kitchen-sink.md

@@ -161,6 +161,13 @@ We also have styling for the terminal, just set the language as `shell`:
 npm install @angular/material --save
 ```
 
+You can style standard Markdown triple backticks with attributes for enhanced presentation:
+
+```ts {header:"Awesome Title", linenums, highlight="[2]", hideCopy}
+console.log('Hello, World!');
+console.log('Awesome Angular Docs!');
+```
+
 #### `<docs-code>` Attributes
 
 | Attributes     | Type                 | Details                                              |

adev/src/content/tools/cli/aot-compiler.md

@@ -472,7 +472,7 @@ Use the non-null type assertion operator to suppress the `Object is possibly 'un
 In the following example, the `person` and `address` properties are always set together, implying that `address` is always non-null if `person` is non-null.
 There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`.
 
-```ts
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -494,7 +494,7 @@ The non-null assertion operator should be used sparingly as refactoring of the c
 
 In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
 
-```ts
+```angular-ts
 
 @Component({
   selector: 'my-component',

adev/src/content/tools/cli/schematics-for-libraries.md

@@ -107,7 +107,7 @@ When you add a schematic to the collection, you have to point to it in the colle
 
 1. Edit the `schematics/collection.json` file to point to the new schematic subfolder, and include a pointer to a schema file that specifies inputs for the new schematic.
 
-<docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
+   <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
 
 1. Go to the `<lib-root>/schematics/my-service` folder.
 1. Create a `schema.json` file and define the available options for the schematic.
@@ -142,19 +142,20 @@ Schematic templates support special syntax to execute code and variable substitu
 1. Create a file named `__name@dasherize__.service.ts.template` that defines a template to use for generating files.
    This template will generate a service that already has Angular's `HttpClient` injected into an `http` property.
 
-   <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
+   ```ts {header:projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)}
 
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
 
    @Injectable({
-   providedIn: 'root'
+      providedIn: 'root'
    })
    export class <%= classify(name) %>Service {
-   private http = inject(HttpClient);
+      private http = inject(HttpClient);
    }
 
-   </docs-code>
+   ```
+
    - The `classify` and `dasherize` methods are utility functions that your schematic uses to transform your source template and filename.
    - The `name` is provided as a property from your factory function.
      It is the same `name` you defined in the schema.
@@ -173,15 +174,15 @@ For details of these data structures and syntax, see the [Schematics README](htt
 1. First, import the schematics definitions you will need.
    The Schematics framework offers many utility functions to create and use rules when running a schematic.
 
-<docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schematics-imports"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schematics-imports"/>
 
 1. Import the defined schema interface that provides the type information for your schematic's options.
 
-<docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schema-imports"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schema-imports"/>
 
 1. To build up the generation schematic, start with an empty rule factory.
 
-<docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" region="factory"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" region="factory"/>
 
 This rule factory returns the tree without modification.
 The options are the option values passed through from the `ng generate` command.

adev/src/content/tools/language-service.md

@@ -91,19 +91,17 @@ Starting with TypeScript 2.3, TypeScript has a plug-in model that the language s
 
 1. Install the latest version of TypeScript in a local `node_modules` directory:
 
-```shell
-
-npm install --save-dev typescript
-
-```
+   ```shell
+   npm install --save-dev typescript
+   ```
 
 1. Install the Angular Language Service package in the same location:
 
-```shell
+   ```shell
 
-npm install --save-dev @angular/language-service
+   npm install --save-dev @angular/language-service
 
-```
+   ```
 
 1. Once the package is installed, add the following to the `"compilerOptions"` section of your project's `tsconfig.json`.
 
@@ -113,7 +111,7 @@ npm install --save-dev @angular/language-service
    ]
    ```
 
-2. In your editor's user preferences \(`Cmd+,` or `Ctrl+,`\), add the following:
+1. In your editor's user preferences \(`Cmd+,` or `Ctrl+,`\), add the following:
 
    ```json {header:"Sublime Text user preferences"}
 

adev/src/content/tools/libraries/using-libraries.md

@@ -41,26 +41,24 @@ To do this:
 
 1. Add the following code in `src/typings.d.ts`:
 
-```ts
-declare module 'host' {
-  export interface Host {
-    protocol?: string;
-    hostname?: string;
-    pathname?: string;
-  }
-  export function parse(url: string, queryString?: string): Host;
-}
-
-```
+   ```ts
+     declare module 'host' {
+       export interface Host {
+         protocol?: string;
+         hostname?: string;
+         pathname?: string;
+       }
+       export function parse(url: string, queryString?: string): Host;
+     }
+   ```
 
 1. In the component or file that uses the library, add the following code:
 
-```ts
-import * as host from 'host';
-const parsedUrl = host.parse('https://angular.dev');
-console.log(parsedUrl.hostname);
-
-```
+   ```ts
+       import * as host from 'host';
+       const parsedUrl = host.parse('https://angular.dev');
+       console.log(parsedUrl.hostname);
+   ```
 
 Define more typings as needed.
 
@@ -85,33 +83,30 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 
 1. Install the library and the associated dependencies using the npm package manager:
 
-```shell
-npm install jquery --save
-npm install popper.js --save
-npm install bootstrap --save
-
-```
+   ```shell
+     npm install jquery --save
+     npm install popper.js --save
+     npm install bootstrap --save
+   ```
 
 1. In the `angular.json` configuration file, add the associated script files to the `scripts` array:
 
-```json
-"scripts": [
-  "node_modules/jquery/dist/jquery.slim.js",
-  "node_modules/popper.js/dist/umd/popper.js",
-  "node_modules/bootstrap/dist/js/bootstrap.js"
-],
-
-```
+   ```json
+     "scripts": [
+         "node_modules/jquery/dist/jquery.slim.js",
+         "node_modules/popper.js/dist/umd/popper.js",
+         "node_modules/bootstrap/dist/js/bootstrap.js"
+       ],
+   ```
 
 1. Add the `bootstrap.css` CSS file to the `styles` array:
 
-```json
-"styles": [
-  "node_modules/bootstrap/dist/css/bootstrap.css",
-  "src/styles.css"
-],
-
-```
+   ```json
+     "styles": [
+         "node_modules/bootstrap/dist/css/bootstrap.css",
+         "src/styles.css"
+     ],
+   ```
 
 1. Run or restart the `ng serve` Angular CLI command to see Bootstrap 4 work in your application.