diff --git a/docs/README.md b/docs/README.md
index 58fb7ce570699..391746b162257 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -149,6 +149,8 @@ You can also statically highlight a set of lines (the user won't be able to chan
 ‎```
 ````
 
+You can also specify ranges like `highlightLines=[2,3,"8-10"]`.
+
 #### Terminal command
 
 To display a terminal command, use:
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 eddc47ed68b38..98641f104a38f 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
@@ -83,6 +83,32 @@ const useUrlHash = (initialValue: string) => {
   return hash;
 };
 
+// pre-process the highlightLines to expand ranges like
+// ["8-10", 19, 22] => [8,9,10,19,22]
+function processHighlightLines(highlightLines: any): number[] {
+  const expandRange = (range: any) => {
+    const [start, end] = range.split('-').map(Number);
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  };
+
+  // Process each item in the array
+  return (
+    highlightLines
+      .map((item: any) => {
+        if (typeof item === 'string' && item.includes('-')) {
+          return expandRange(item);
+        }
+        return Number(item);
+      })
+      .flat()
+      // remove duplicates
+      .filter(
+        (value: any, index: number, self: number[]) =>
+          self.indexOf(value) === index
+      )
+  );
+}
+
 export function Fence({
   children,
   command,
@@ -105,6 +131,10 @@ export function Fence({
   const { push, asPath } = useRouter();
   const hash = decodeURIComponent(useUrlHash(''));
 
+  if (highlightLines) {
+    highlightLines = processHighlightLines(highlightLines);
+  }
+
   function lineNumberStyle(lineNumber: number) {
     if (
       (highlightLines && highlightLines.includes(lineNumber)) ||