From 5fd0097192c1f331d833af022dce645aeba5be22 Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@users.noreply.github.com>
Date: Wed, 18 Oct 2023 11:44:13 -0400
Subject: [PATCH] feat(nx-dev): statically highlight lines in code (#19703)

---
 docs/README.md                                      | 12 ++++++++++++
 docs/shared/angular-tutorial/angular-monorepo.md    | 10 +++++-----
 nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx |  7 ++++++-
 nx-dev/ui-markdoc/src/lib/nodes/fence.schema.tsx    |  1 +
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 8305dfa7914bd..0d29f27486ff3 100644
--- a/docs/README.md
+++ b/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:
diff --git a/docs/shared/angular-tutorial/angular-monorepo.md b/docs/shared/angular-tutorial/angular-monorepo.md
index d14cee1253253..d0fa78a5d752c 100644
--- a/docs/shared/angular-tutorial/angular-monorepo.md
+++ b/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';
 
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
index ec8088caec4ca..eddc47ed68b38 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
@@ -89,6 +89,7 @@ export function Fence({
   path,
   fileName,
   lineGroups,
+  highlightLines,
   language,
   enableCopy,
 }: {
@@ -96,6 +97,7 @@ export function Fence({
   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',
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/fence.schema.tsx b/nx-dev/ui-markdoc/src/lib/nodes/fence.schema.tsx
index 3efff77d24eb2..db7c802c943de 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/fence.schema.tsx
+++ b/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' },