feat(nx-dev): statically highlight lines in code (#19703)

docs/README.md

@@ -89,6 +89,18 @@ For example:
 [This will highlight the first group.](#first)
 ```
 
+You can also statically highlight a set of lines (the user won't be able to change what is highlighted):
+
+````
+‎```javascript {% highlightLines=[2,3] %}
+‎ const code = "goes here";
+‎ This is highlighted
+‎ This is also highlighted
+‎ This is not highlighted
+‎ Neither is this
+‎```
+````
+
 #### Terminal command
 
 To display a terminal command, use:

docs/shared/angular-tutorial/angular-monorepo.md

@@ -404,7 +404,7 @@ export * from './lib/product-list/product-list.component';
 
 We're ready to import it into our main application now. First (if you haven't already), let's set up the Angular router. Configure it in the `app.config.ts`.
 
-```ts {% fileName="apps/angular-store/src/app/app.config.ts" %}
+```ts {% fileName="apps/angular-store/src/app/app.config.ts" highlightLines=[2,3,4,5,6,9] %}
 import { ApplicationConfig } from '@angular/core';
 import {
   provideRouter,
@@ -425,7 +425,7 @@ And in `app.component.html`:
 
 Then we can add the `ProductListComponent` component to our `app.routes.ts` and render it via the routing mechanism whenever a user hits the `/products` route.
 
-```ts {% fileName="apps/angular-store/src/app/app.routes.ts" %}
+```ts {% fileName="apps/angular-store/src/app/app.routes.ts" highlightLines=[10,11,12,13,14] %}
 import { Route } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
@@ -454,7 +454,7 @@ Let's apply the same for our `orders` library.
 
 In the end, your `app.routes.ts` should look similar to this:
 
-```ts {% fileName="apps/angular-store/src/app/app.routes.ts" %}
+```ts {% fileName="apps/angular-store/src/app/app.routes.ts" highlightLines=[15,16,17,18,19] %}
 import { Route } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
@@ -479,7 +479,7 @@ export const appRoutes: Route[] = [
 
 Let's also show products in the `inventory` app.
 
-```ts {% fileName="apps/inventory/src/app/app.component.ts" %}
+```ts {% fileName="apps/inventory/src/app/app.component.ts" highlightLines=[2,6] %}
 import { Component } from '@angular/core';
 import { ProductListComponent } from '@angular-monorepo/products';
 
@@ -921,7 +921,7 @@ To enforce the rules, Nx ships with a custom ESLint rule. Open the `.eslintrc.ba
 
 To test it, go to your `libs/products/src/lib/product-list/product-list.component.ts` file and import the `OrderListComponent` from the `orders` project:
 
-```ts {% fileName="libs/products/src/lib/product-list/product-list.component.ts" %}
+```ts {% fileName="libs/products/src/lib/product-list/product-list.component.ts" highlightLines=[4,5] %}
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 

nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx

@@ -89,13 +89,15 @@ export function Fence({
   path,
   fileName,
   lineGroups,
+  highlightLines,
   language,
   enableCopy,
 }: {
   children: string;
   command: string;
   path: string;
   fileName: string;
+  highlightLines: number[];
   lineGroups: Record<string, number[]>;
   language: string;
   enableCopy: boolean;
@@ -104,7 +106,10 @@ export function Fence({
   const hash = decodeURIComponent(useUrlHash(''));
 
   function lineNumberStyle(lineNumber: number) {
-    if (lineGroups[hash] && lineGroups[hash].includes(lineNumber)) {
+    if (
+      (highlightLines && highlightLines.includes(lineNumber)) ||
+      (lineGroups[hash] && lineGroups[hash].includes(lineNumber))
+    ) {
       return {
         fontSize: 0,
         display: 'inline-block',

nx-dev/ui-markdoc/src/lib/nodes/fence.schema.tsx

@@ -6,6 +6,7 @@ export const fence: Schema = {
     content: { type: 'String', render: false, required: true },
     language: { type: 'String' },
     fileName: { type: 'String', default: '' },
+    highlightLines: { type: 'Array', default: [] },
     lineGroups: { type: 'Object', default: {} },
     command: { type: 'String', default: '' },
     path: { type: 'String', default: '~/workspace' },