Add highlighting support to code blocks (#1654)

* Add highlighting support to code blocks

* BR tag support

* Add screen reader support

* Refactor highlight parsing logic to eliminate extra blank lines from highlighted code. Update tests to ensure correct handling of highlight markers and improve clipboard copy functionality.

* Add more docs

* Type fixes

* Update snapshots

* Update syntax

Author: nygrenh

services/main-frontend/src/components/course-material/ContentRenderer/core/formatting/CodeBlock/CopyButton.tsx

@@ -26,14 +26,15 @@ const ICON_COLORS = {
   ERROR: baseTheme.colors.red[300],
 } as const
 
+/** Plain code string to copy; uses newlines (CodeBlock passes cleanCode; br in source is already normalized). */
 interface CopyButtonProps {
   content: string
 }
 
 const buttonStyles = css`
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 26px;
+  right: 26px;
   background: transparent;
   border: none;
   cursor: pointer;
@@ -56,11 +57,11 @@ const buttonStyles = css`
     color: ${ICON_COLORS.ERROR};
   }
   &:hover:not([data-status="default"]) {
-    background-color: ${baseTheme.colors.gray[600]};
+    background-color: rgba(255, 255, 255, 0.08);
   }
   &:hover[data-status="default"] {
     transform: scale(1.1);
-    background-color: ${baseTheme.colors.gray[600]};
+    background-color: rgba(255, 255, 255, 0.08);
   }
 `
 
@@ -107,7 +108,7 @@ const AnimatedDiv = animated.div as React.FC<{
 }>
 
 /**
- * Button component that copies text to clipboard.
+ * Copies the given code string to clipboard. Content is expected to use newlines (upstream handles <br> → \n; escaped br stays literal).
  * Shows success/error state for 2 seconds after copy attempt.
  */
 export const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {

services/main-frontend/src/components/course-material/ContentRenderer/core/formatting/CodeBlock/SyntaxHighlightedContainer.tsx

@@ -3,45 +3,66 @@
 import "highlight.js/styles/atom-one-dark.css"
 import { css } from "@emotion/css"
 import hljs from "highlight.js"
-import { memo, useEffect, useMemo, useRef } from "react"
+import { memo, useEffect, useRef } from "react"
 
-import { replaceBrTagsWithNewlines } from "./utils"
+import { ensureLineHighlightPluginRegistered } from "./lineHighlightPlugin"
 
 import { sanitizeCourseMaterialHtml } from "@/utils/course-material/sanitizeCourseMaterialHtml"
 
+ensureLineHighlightPluginRegistered(hljs)
+
 interface SyntaxHighlightedContainerProps {
   content: string | undefined
+  highlightedLines?: Set<number>
 }
 
+const codeBlockStyles = css`
+  background-color: #1a2333;
+  border-radius: 4px;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  .code-line {
+    display: block;
+  }
+  .highlighted-line {
+    background-color: rgba(255, 255, 100, 0.1);
+    margin: 0 -16px;
+    padding: 0 16px 0 13px;
+    border-left: 3px solid #ffd700;
+  }
+`
+
 /**
- * Renders code with syntax highlighting using highlight.js.
+ * Renders code with syntax highlighting using highlight.js. Optionally wraps lines and highlights specific lines.
+ * Receives content that already uses newlines (CodeBlock normalizes `<br>` to `\n` upstream; escaped br stays literal).
  */
-const SyntaxHighlightedContainer: React.FC<SyntaxHighlightedContainerProps> = ({ content }) => {
+const SyntaxHighlightedContainer: React.FC<SyntaxHighlightedContainerProps> = ({
+  content,
+  highlightedLines,
+}) => {
   const ref = useRef<HTMLElement>(null)
 
-  const replacedContent = useMemo(() => {
-    return replaceBrTagsWithNewlines(content) ?? ""
-  }, [content])
-
   useEffect(() => {
     if (!ref.current) {
       return
     }
+
+    delete ref.current.dataset.hljsLineWrapped
+    delete ref.current.dataset.highlighted
+    if (highlightedLines && highlightedLines.size > 0) {
+      ref.current.dataset.highlightLines = Array.from(highlightedLines)
+        .sort((a, b) => a - b)
+        .join(",")
+    } else {
+      delete ref.current.dataset.highlightLines
+    }
+
+    // Sanitization is the source of truth for HTML safety; highlight.js does not preserve arbitrary HTML.
+    ref.current.innerHTML = sanitizeCourseMaterialHtml(content ?? "")
     hljs.highlightElement(ref.current)
-  }, [ref])
-
-  return (
-    <code
-      className={css`
-        background-color: #1a2333;
-        border-radius: 4px;
-        font-variant-ligatures: none;
-        font-feature-settings: "liga" 0;
-      `}
-      ref={ref}
-      dangerouslySetInnerHTML={{ __html: sanitizeCourseMaterialHtml(replacedContent) }}
-    />
-  )
+  }, [content, highlightedLines])
+
+  return <code className={codeBlockStyles} ref={ref} />
 }
 
 export default memo(SyntaxHighlightedContainer)

services/main-frontend/src/components/course-material/ContentRenderer/core/formatting/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import { render } from "@testing-library/react"
+import { fireEvent, render, waitFor } from "@testing-library/react"
 import "@testing-library/jest-dom"
 
+import { parseHighlightedCode } from "../highlightParser"
 import CodeBlock from "../index"
+import { replaceBrTagsWithNewlines } from "../utils"
 
 // Helper function for rendering CodeBlock with default content
 const renderCodeBlock = (content = 'console.log("Hello, World!")') =>
@@ -68,4 +70,201 @@ describe("CodeBlock", () => {
     // The code block should decode the encoded ampersands
     expect(codeElement?.textContent).toBe("apt-get update && apt-get install -y curl python3")
   })
+
+  describe("line highlighting", () => {
+    it("should remove highlight markers from displayed code", async () => {
+      const contentWithMarkers = "const x = 1 // HIGHLIGHT LINE\nfoo()\nbar()"
+      const { container } = renderCodeBlock(contentWithMarkers)
+      await waitFor(() => {
+        const codeElement = container.querySelector("code")
+        expect(codeElement?.textContent).not.toContain("// HIGHLIGHT LINE")
+        expect(codeElement?.textContent).toContain("const x = 1")
+        expect(codeElement?.textContent).toContain("foo()")
+      })
+    })
+
+    it("should apply highlighted-line class to marked lines", async () => {
+      const contentWithMarkers = "line1 // HIGHLIGHT LINE\nline2\nline3"
+      const { container } = renderCodeBlock(contentWithMarkers)
+      await waitFor(
+        () => {
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBeGreaterThanOrEqual(1)
+          expect(highlighted[0].textContent).toContain("line1")
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should wrap lines in code-line spans when highlighting is used", async () => {
+      const contentWithMarkers = "a // HIGHLIGHT LINE\nb\nc"
+      const { container } = renderCodeBlock(contentWithMarkers)
+      await waitFor(
+        () => {
+          const codeLines = container.querySelectorAll(".code-line")
+          expect(codeLines.length).toBeGreaterThanOrEqual(2)
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should copy clean code without markers when copy button is used", async () => {
+      const writeText = jest.fn(() => Promise.resolve())
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      })
+      const consoleSpy = jest.spyOn(console, "info").mockImplementation()
+      const contentWithMarkers =
+        "const url = process.env.URI // HIGHLIGHT LINE\nmongoose.connect(url)"
+      const { container } = renderCodeBlock(contentWithMarkers)
+      const copyButton = container.querySelector('button[aria-label="copy-to-clipboard"]')
+      expect(copyButton).toBeInTheDocument()
+      fireEvent.click(copyButton!)
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalled()
+      })
+      expect(writeText).toHaveBeenCalledWith("const url = process.env.URI\nmongoose.connect(url)")
+      consoleSpy.mockRestore()
+    })
+
+    it("copied text matches cleanCode when content has <br> and highlight markers (no extra blank lines from markers)", async () => {
+      const writeText = jest.fn(() => Promise.resolve())
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      })
+      const contentWithBrAndMarkers =
+        "const url = process.env.MONGODB_URI // HIGHLIGHT LINE<br><br>mongoose.connect(url)<br>// BEGIN HIGHLIGHT<br>.then(result => {<br>  console.log('connected to MongoDB')<br>})<br>.catch(error => {<br>  console.log('error connecting to MongoDB:', error.message)<br>})<br>// END HIGHLIGHT<br><br>module.exports = mongoose.model('Note', noteSchema) // HIGHLIGHT LINE"
+      const { container } = renderCodeBlock(contentWithBrAndMarkers)
+      await waitFor(() => {
+        const codeElement = container.querySelector("code")
+        expect(codeElement?.textContent).not.toContain("// HIGHLIGHT")
+      })
+      const copyButton = container.querySelector('button[aria-label="copy-to-clipboard"]')
+      fireEvent.click(copyButton!)
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalled()
+      })
+      const copied = (writeText.mock.calls[0] as unknown as [string] | undefined)?.[0]
+      expect(copied).toBeDefined()
+      const processed = replaceBrTagsWithNewlines(contentWithBrAndMarkers)
+      const { cleanCode: expected } = parseHighlightedCode(processed ?? "")
+      expect(String(copied).replace(/\r\n/g, "\n")).toBe(expected)
+    })
+
+    it("should highlight range between BEGIN HIGHLIGHT and END HIGHLIGHT", async () => {
+      const contentWithRange = "before\n// BEGIN HIGHLIGHT\nmid1\nmid2\n// END HIGHLIGHT\nafter"
+      const { container } = renderCodeBlock(contentWithRange)
+      await waitFor(
+        () => {
+          const codeElement = container.querySelector("code")
+          expect(codeElement?.textContent).not.toContain("// BEGIN HIGHLIGHT")
+          expect(codeElement?.textContent).not.toContain("// END HIGHLIGHT")
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBeGreaterThanOrEqual(2)
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should recognize highlight markers when content has <br> tags", async () => {
+      const contentWithBrAndMarkers =
+        "const x = 1 // HIGHLIGHT LINE<br/>const y = 2<br/>// BEGIN HIGHLIGHT<br/>const z = 3<br/>// END HIGHLIGHT"
+      const { container } = renderCodeBlock(contentWithBrAndMarkers)
+      await waitFor(
+        () => {
+          const codeElement = container.querySelector("code")
+          expect(codeElement?.textContent).not.toContain("// HIGHLIGHT LINE")
+          expect(codeElement?.textContent).not.toContain("// BEGIN HIGHLIGHT")
+          expect(codeElement?.textContent).not.toContain("// END HIGHLIGHT")
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBeGreaterThanOrEqual(2)
+          expect(highlighted[0].textContent).toContain("const x = 1")
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("correctly highlights lines in code with blank lines", async () => {
+      const contentWithBlanks = "first\n\nthird // HIGHLIGHT LINE"
+      const { container } = renderCodeBlock(contentWithBlanks)
+      await waitFor(
+        () => {
+          const lines = container.querySelectorAll(".code-line")
+          expect(lines.length).toBe(3)
+          expect(lines[2].classList.contains("highlighted-line")).toBe(true)
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should correctly highlight lines inside multi-line block comments", async () => {
+      const content = "// BEGIN HIGHLIGHT\n/*\n * block comment\n */\n// END HIGHLIGHT\ncode"
+      const { container } = renderCodeBlock(content)
+      await waitFor(
+        () => {
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBeGreaterThanOrEqual(3)
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should not double-wrap lines on re-render", async () => {
+      const content = "a // HIGHLIGHT LINE\nb"
+      const data = {
+        attributes: { content },
+        name: "core/code" as const,
+        isValid: true,
+        clientId: "test-id",
+        innerBlocks: [],
+      }
+      const { container, rerender } = render(<CodeBlock data={data} id="test-id" isExam={false} />)
+      await waitFor(() => {
+        expect(container.querySelectorAll(".code-line").length).toBe(2)
+      })
+      rerender(<CodeBlock data={data} id="test-id" isExam={false} />)
+      await waitFor(() => {
+        expect(container.querySelectorAll(".code-line").length).toBe(2)
+      })
+    })
+
+    it("should highlight lines when language is auto-detected", async () => {
+      const content = "const x = 1 // HIGHLIGHT LINE\nconst y = 2"
+      const { container } = renderCodeBlock(content)
+      await waitFor(
+        () => {
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBe(1)
+          expect(highlighted[0].textContent).toContain("const x = 1")
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("should strip # HIGHLIGHT LINE and highlight regardless of language", async () => {
+      const content = "x = 1  # HIGHLIGHT LINE\ny = 2"
+      const { container } = renderCodeBlock(content)
+      await waitFor(
+        () => {
+          const codeEl = container.querySelector("code")
+          expect(codeEl?.textContent).not.toContain("# HIGHLIGHT LINE")
+          const highlighted = container.querySelectorAll(".highlighted-line")
+          expect(highlighted.length).toBe(1)
+          expect(highlighted[0].textContent?.trim()).toBe("x = 1")
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    it("announces highlighted lines to screen readers when highlights are present", () => {
+      const content = "line1 // HIGHLIGHT LINE\nline2\nline3 // HIGHLIGHT LINE"
+      const { container } = renderCodeBlock(content)
+      const preParent = container.querySelector("pre")?.parentElement
+      const srOnlySpan = preParent?.querySelector(":scope > span")
+      expect(srOnlySpan).toBeInTheDocument()
+      expect(srOnlySpan?.textContent?.length).toBeGreaterThan(0)
+    })
+  })
 })