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)) ||