feat: define prompt lines for bash code

packages/fern-docs/syntax-highlighter/src/FernSyntaxHighlighter.tsx

@@ -7,7 +7,7 @@ import { FernSyntaxHighlighterTokensVirtualized } from "./FernSyntaxHighlighterT
 import { createRawTokens, highlightTokens, useHighlighter } from "./fernShiki";
 
 // [number, number] is a range of lines to highlight
-type HighlightLine = number | [number, number];
+type LineNumber = number | [number, number];
 
 export interface FernSyntaxHighlighterProps {
   className?: string;
@@ -16,12 +16,13 @@ export interface FernSyntaxHighlighterProps {
   code: string;
   language: string;
   fontSize?: "sm" | "base" | "lg";
-  highlightLines?: HighlightLine[];
+  highlightLines?: LineNumber[];
   highlightStyle?: "highlight" | "focus";
   viewportRef?: React.RefObject<ScrollToHandle>;
   maxLines?: number;
   wordWrap?: boolean;
   matchLanguage?: string;
+  promptLines?: LineNumber[];
 }
 
 export const FernSyntaxHighlighter = forwardRef<

packages/fern-docs/syntax-highlighter/src/FernSyntaxHighlighterTokens.tsx

@@ -6,11 +6,7 @@ import type { Element } from "hast";
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
 import { HastToJSX } from "./HastToJsx";
 import { HighlightedTokens } from "./fernShiki";
-import {
-  flattenHighlightLines,
-  getMaxHeight,
-  type HighlightLine,
-} from "./utils";
+import { flattenLineNumbers, getMaxHeight, type LineNumber } from "./utils";
 
 export interface ScrollToHandle {
   scrollTo: (options: ScrollToOptions) => void;
@@ -22,14 +18,15 @@ export interface ScrollToHandle {
 export interface FernSyntaxHighlighterTokensProps {
   tokens: HighlightedTokens;
   fontSize?: "sm" | "base" | "lg";
-  highlightLines?: HighlightLine[];
+  highlightLines?: LineNumber[];
   highlightStyle?: "highlight" | "focus";
 
   className?: string;
   style?: React.CSSProperties;
   viewportRef?: React.RefObject<ScrollToHandle>;
   maxLines?: number;
   wordWrap?: boolean;
+  promptLines?: LineNumber[];
 }
 
 export function fernSyntaxHighlighterTokenPropsAreEqual(
@@ -38,6 +35,7 @@ export function fernSyntaxHighlighterTokenPropsAreEqual(
 ): boolean {
   return (
     isEqual(prevProps.highlightLines, nextProps.highlightLines) &&
+    isEqual(prevProps.promptLines, nextProps.promptLines) &&
     isEqual(prevProps.style, nextProps.style) &&
     prevProps.fontSize === nextProps.fontSize &&
     prevProps.highlightStyle === nextProps.highlightStyle &&
@@ -60,6 +58,7 @@ export const FernSyntaxHighlighterTokens = memo(
       tokens,
       maxLines,
       wordWrap,
+      promptLines,
     } = props;
     const scrollAreaRef = useRef<HTMLDivElement>(null);
 
@@ -104,9 +103,13 @@ export const FernSyntaxHighlighterTokens = memo(
     }, [tokens.hast]);
 
     const highlightedLines = useMemo(
-      () => flattenHighlightLines(highlightLines ?? []),
+      () => flattenLineNumbers(highlightLines ?? []),
       [highlightLines]
     );
+    const promptLineNumbers = useMemo(
+      () => flattenLineNumbers(promptLines ?? [0]),
+      [promptLines]
+    );
     const lines = useMemo(() => {
       const lines: Element[] = [];
       visit(tokens.hast, "element", (node) => {
@@ -172,7 +175,7 @@ export const FernSyntaxHighlighterTokens = memo(
                         <td className="code-block-line-gutter">
                           <span>
                             {gutterCli
-                              ? lineNumber === 0
+                              ? promptLineNumbers.includes(lineNumber)
                                 ? "$"
                                 : ">"
                               : lineNumber + 1}

packages/fern-docs/syntax-highlighter/src/FernSyntaxHighlighterTokensVirtualized.tsx

@@ -18,12 +18,13 @@ import {
   fernSyntaxHighlighterTokenPropsAreEqual,
 } from "./FernSyntaxHighlighterTokens";
 import { HastToJSX } from "./HastToJsx";
-import { flattenHighlightLines, getLineHeight, getMaxHeight } from "./utils";
+import { flattenLineNumbers, getLineHeight, getMaxHeight } from "./utils";
 
 interface CodeBlockContext {
   fontSize: "sm" | "base" | "lg";
   highlightStyle: "highlight" | "focus" | undefined;
   highlightedLines: number[];
+  promptLineNumbers: number[];
   lang: string;
   wordWrap?: boolean;
 }
@@ -98,6 +99,7 @@ export const FernSyntaxHighlighterTokensVirtualized = memo(
       tokens,
       maxLines,
       wordWrap,
+      promptLines,
     } = props;
 
     const virtuosoRef = useRef<TableVirtuosoHandle>(null);
@@ -166,10 +168,18 @@ export const FernSyntaxHighlighterTokensVirtualized = memo(
         fontSize,
         lang: tokens.lang,
         highlightStyle,
-        highlightedLines: flattenHighlightLines(highlightLines ?? []),
+        highlightedLines: flattenLineNumbers(highlightLines ?? []),
         wordWrap,
+        promptLineNumbers: flattenLineNumbers(promptLines ?? [0]),
       }),
-      [fontSize, highlightLines, highlightStyle, tokens.lang, wordWrap]
+      [
+        fontSize,
+        highlightLines,
+        highlightStyle,
+        tokens.lang,
+        wordWrap,
+        promptLines,
+      ]
     );
 
     const lang = tokens.lang;
@@ -185,7 +195,11 @@ export const FernSyntaxHighlighterTokensVirtualized = memo(
           {!plaintext && (
             <td className="code-block-line-gutter">
               <span>
-                {gutterCli ? (lineNumber === 0 ? "$" : ">") : lineNumber + 1}
+                {gutterCli
+                  ? context.promptLineNumbers.includes(lineNumber)
+                    ? "$"
+                    : ">"
+                  : lineNumber + 1}
               </span>
             </td>
           )}
@@ -194,7 +208,7 @@ export const FernSyntaxHighlighterTokensVirtualized = memo(
           </td>
         </>
       ),
-      [gutterCli, plaintext]
+      [gutterCli, plaintext, context.promptLineNumbers]
     );
 
     return (

packages/fern-docs/syntax-highlighter/src/utils.ts

@@ -1,5 +1,5 @@
 // [number, number] is a range of lines to highlight
-export type HighlightLine = number | [number, number];
+export type LineNumber = number | [number, number];
 
 export function getLineHeight(fontSize: "sm" | "base" | "lg"): number {
   return 1.625 * (fontSize === "sm" ? 12 : fontSize === "base" ? 14 : 16);
@@ -18,10 +18,8 @@ export function getMaxHeight(
   return maxLines * lineHeight + (fontSize === "sm" ? 8 : 12) * 2;
 }
 
-export function flattenHighlightLines(
-  highlightLines: HighlightLine[]
-): number[] {
-  return highlightLines.flatMap((lineNumber) => {
+export function flattenLineNumbers(lineNumbers: LineNumber[]): number[] {
+  return lineNumbers.flatMap((lineNumber) => {
     if (Array.isArray(lineNumber)) {
       const [start, end] = lineNumber;
       return Array.from({ length: end - start + 1 }, (_, i) => start + i - 1);

packages/fern-docs/ui/src/mdx/__test__/rehypeFernCode.test.ts

@@ -114,6 +114,64 @@ describe("parseBlockMetaString", () => {
     expect(meta.wordWrap).not.toBe(true);
     expect(meta.title).toBe("wordWrap");
   });
+
+  it("should parse promptLines meta with single value", () => {
+    const node = createElement("promptLines={1}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1]);
+  });
+
+  it("should parse promptLines meta with multiple values", () => {
+    const node = createElement("promptLines={1,2,3}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2, 3]);
+  });
+
+  it("should parse promptLines meta with spaces", () => {
+    const node = createElement("promptLines={1, 2, 3}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2, 3]);
+  });
+
+  it("should parse promptLines meta along with other properties", () => {
+    const node = createElement("title='Example' promptLines={1,2} focused");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2]);
+    expect(meta.title).toEqual("Example");
+    expect(meta.focused).toBe(true);
+  });
+
+  it("should handle empty promptLines", () => {
+    const node = createElement("promptLines={}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1]);
+  });
+
+  it("should parse both promptLines and highlights", () => {
+    const node = createElement("promptLines={1,2} {3,4,5}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2]);
+    expect(meta.highlights).toEqual([3, 4, 5]);
+  });
+
+  it("should parse both promptLines and highlights in the reverse order", () => {
+    const node = createElement("{3,4,5} promptLines={1,2}");
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2]);
+    expect(meta.highlights).toEqual([3, 4, 5]);
+  });
+
+  it("should parse promptLines and highlights with other properties", () => {
+    const node = createElement(
+      "title='Example' promptLines={1,2} {3,4} focused wordWrap"
+    );
+    const meta = parseBlockMetaString(node);
+    expect(meta.promptLines).toEqual([1, 2]);
+    expect(meta.highlights).toEqual([3, 4]);
+    expect(meta.title).toEqual("Example");
+    expect(meta.focused).toBe(true);
+    expect(meta.wordWrap).toBe(true);
+  });
 });
 
 function createElement(metastring: string, lang = "plaintext"): Hast.Element {

packages/fern-docs/ui/src/mdx/plugins/rehypeFernCode.ts

@@ -96,6 +96,7 @@ export function rehypeFernCode(): (tree: Hast.Root) => void {
             maxLines: meta.maxLines,
             wordWrap: meta.wordWrap,
             matchLanguage: meta.matchLanguage,
+            promptLines: meta.promptLines,
           };
           if (meta.title == null) {
             parent?.children.splice(index, 1, {
@@ -135,6 +136,7 @@ interface CodeBlockItem {
   title: string | undefined;
   wordWrap: boolean | undefined;
   matchLanguage: string | undefined;
+  promptLines: number[];
 }
 
 function visitCodeBlockNodes(nodeToVisit: MdxJsxElementHast) {
@@ -166,6 +168,7 @@ function visitCodeBlockNodes(nodeToVisit: MdxJsxElementHast) {
                     : undefined),
               wordWrap: meta.wordWrap,
               matchLanguage: meta.matchLanguage,
+              promptLines: meta.promptLines,
             });
           }
         }
@@ -191,6 +194,7 @@ function visitCodeBlockNodes(nodeToVisit: MdxJsxElementHast) {
           title: meta.title,
           wordWrap: meta.wordWrap,
           matchLanguage: meta.matchLanguage,
+          promptLines: meta.promptLines,
         });
       }
     }
@@ -226,6 +230,7 @@ interface FernCodeMeta {
   wordWrap?: boolean;
   highlights: number[];
   matchLanguage: string | undefined;
+  promptLines: number[];
 }
 
 function maybeParseInt(str: string | null | undefined): number | undefined {
@@ -290,6 +295,14 @@ export function parseBlockMetaString(
   const match = matchLanguage?.[1] ?? matchLanguage?.[2];
   meta = meta.replace(matchLanguage?.[0] ?? "", "");
 
+  const promptLinesMatch = meta.match(/promptLines=\{(.*?)\}/);
+  const promptLines = promptLinesMatch?.[1]
+    ? rangeParser(promptLinesMatch[1])
+    : [1];
+  meta = meta
+    .replace(promptLinesMatch?.[0] ?? "", "")
+    .replace(promptLinesMatch?.[1] ?? "", "");
+
   const [highlights, strippedMeta] = parseHighlightedLineNumbers(meta);
   meta = strippedMeta;
 
@@ -318,6 +331,7 @@ export function parseBlockMetaString(
     wordWrap: wordWrap != null,
     highlights,
     matchLanguage: match,
+    promptLines,
   };
 }