diff --git a/javascript/packages/highlighter/src/diagnostic-markers.ts b/javascript/packages/highlighter/src/diagnostic-markers.ts
new file mode 100644
index 000000000..38ed7e1ee
--- /dev/null
+++ b/javascript/packages/highlighter/src/diagnostic-markers.ts
@@ -0,0 +1,52 @@
+import type { SerializedLocation } from "@herb-tools/core"
+
+/**
+ * A single `~~~` underline for one line of a (possibly multi-line) diagnostic.
+ *
+ * `start` and `end` are zero-based indices into the source line, `end` being exclusive.
+ */
+export interface DiagnosticMarker {
+  line: number
+  start: number
+  end: number
+}
+
+/**
+ * Compute the underline markers for a diagnostic location.
+ *
+ * A diagnostic spanning multiple lines gets one marker per line: the first line is
+ * marked from `location.start.column`, the last line up to `location.end.column`, and
+ * every line in between is marked across its non-whitespace content. Lines without any
+ * content to mark (blank or whitespace-only) are skipped.
+ *
+ * @param location - The diagnostic location
+ * @param lines - The source content split into lines
+ * @returns One marker per marked line, ordered from first to last, never empty
+ */
+export function computeDiagnosticMarkers(location: SerializedLocation, lines: string[]): DiagnosticMarker[] {
+  const startLine = Math.max(1, location.start.line)
+  const endLine = Math.max(startLine, Math.min(location.end.line, Math.max(lines.length, startLine)))
+
+  const markers: DiagnosticMarker[] = []
+
+  for (let lineNumber = startLine; lineNumber <= endLine; lineNumber++) {
+    const line = lines[lineNumber - 1] ?? ""
+    const isFirstLine = lineNumber === startLine
+    const isLastLine = lineNumber === location.end.line
+
+    const start = Math.max(0, isFirstLine ? location.start.column : line.length - line.trimStart().length)
+    const end = isLastLine ? location.end.column : line.trimEnd().length
+
+    if (end > start) {
+      markers.push({ line: lineNumber, start, end })
+    }
+  }
+
+  if (markers.length === 0) {
+    const start = Math.max(0, location.start.column)
+
+    markers.push({ line: startLine, start, end: start + 1 })
+  }
+
+  return markers
+}
diff --git a/javascript/packages/highlighter/src/diagnostic-renderer.ts b/javascript/packages/highlighter/src/diagnostic-renderer.ts
index a5492fb92..563eec181 100644
--- a/javascript/packages/highlighter/src/diagnostic-renderer.ts
+++ b/javascript/packages/highlighter/src/diagnostic-renderer.ts
@@ -2,7 +2,9 @@ import { colorize, hyperlink, severityColor, ANSI_REGEX, ANSI_REGEX_START, ANSI_
 import { applyDimToStyledText } from "./util.js"
 import { LineWrapper } from "./line-wrapper.js"
 import { GUTTER_WIDTH, MIN_CONTENT_WIDTH } from "./gutter-config.js"
+import { computeDiagnosticMarkers } from "./diagnostic-markers.js"
 
+import type { DiagnosticMarker } from "./diagnostic-markers.js"
 import type { SyntaxRenderer } from "./syntax-renderer.js"
 import type { Diagnostic } from "@herb-tools/core"
 
@@ -134,7 +136,7 @@ export class DiagnosticRenderer {
   ): string {
     const {
       contextLines = 2,
-      showLineNumbers: _showLineNumbers = true, // eslint-disable-line no-unused-vars
+      showLineNumbers = true,
       optimizeHighlighting = true,
       wrapLines = true,
       maxWidth = LineWrapper.getTerminalWidth(),
@@ -153,11 +155,15 @@ export class DiagnosticRenderer {
     const diagnosticId = codeUrl ? hyperlink(diagnosticIdText, codeUrl) : diagnosticIdText
 
     const originalLines = content.split("\n")
-    const targetLineNumber = diagnostic.location.start.line
-    const column = diagnostic.location.start.column - 1
 
-    const startLine = Math.max(1, targetLineNumber - contextLines)
-    const endLine = Math.min(originalLines.length, targetLineNumber + contextLines)
+    const markers = computeDiagnosticMarkers(diagnostic.location, originalLines)
+    const markersByLine = new Map<number, DiagnosticMarker>(markers.map(marker => [marker.line, marker]))
+
+    const firstMarkedLine = markers[0].line
+    const lastMarkedLine = markers[markers.length - 1].line
+
+    const startLine = Math.max(1, firstMarkedLine - contextLines)
+    const endLine = Math.min(originalLines.length, lastMarkedLine + contextLines)
 
     let lines: string[]
     let lineOffset = 0
@@ -180,13 +186,21 @@ export class DiagnosticRenderer {
       lineOffset = 0
     }
 
+    const separator = colorize("│", "gray")
+    const gutterPrefix = showLineNumbers ? `        ${separator} ` : ""
+    const availableWidth = showLineNumbers
+      ? Math.max(MIN_CONTENT_WIDTH, maxWidth - GUTTER_WIDTH)
+      : maxWidth
+
     let contextOutput = ""
-    let adjustedColumn = column
-    let adjustedPointerLength = Math.max(1, diagnostic.location.end.column - diagnostic.location.start.column)
 
     for (let i = startLine; i <= endLine; i++) {
       const line = lines[i - 1 - lineOffset] || ""
-      const isTargetLine = i === targetLineNumber
+      const marker = markersByLine.get(i)
+      const isTargetLine = marker !== undefined
+
+      let markerStart = marker ? marker.start : 0
+      let markerLength = marker ? Math.max(1, marker.end - marker.start) : 0
 
       const lineNumber = isTargetLine
         ? colorize(i.toString().padStart(3, " "), "bold")
@@ -196,69 +210,54 @@ export class DiagnosticRenderer {
         ? colorize("  → ", color)
         : "    "
 
-      const separator = colorize("│", "gray")
-
-      let displayLine = line
+      const linePrefix = showLineNumbers ? `${prefix}${lineNumber} ${separator} ` : ""
 
-      if (isTargetLine) {
-        displayLine = line
-      } else {
-        displayLine = applyDimToStyledText(line)
-      }
+      const displayLine = isTargetLine ? line : applyDimToStyledText(line)
 
       if (shouldWrap) {
-        const linePrefix = `${prefix}${lineNumber} ${separator} `
-        const availableWidth = Math.max(MIN_CONTENT_WIDTH, maxWidth - GUTTER_WIDTH)
         const wrappedLines = LineWrapper.wrapLine(displayLine, availableWidth, "")
 
         for (let j = 0; j < wrappedLines.length; j++) {
           if (j === 0) {
             contextOutput += `${linePrefix}${wrappedLines[j]}\n`
           } else {
-            contextOutput += `        ${separator} ${wrappedLines[j]}\n`
+            contextOutput += `${gutterPrefix}${wrappedLines[j]}\n`
           }
         }
       } else if (shouldTruncate) {
-        const linePrefix = `${prefix}${lineNumber} ${separator} `
-        const availableWidth = Math.max(MIN_CONTENT_WIDTH, maxWidth - GUTTER_WIDTH)
-
         let truncatedLine: string
 
-        if (isTargetLine) {
-          const diagnosticEnd = diagnostic.location.end.column - 1
-          const result = this.truncateLineForDiagnostic(displayLine, column, diagnosticEnd, availableWidth)
+        if (marker) {
+          const result = this.truncateLineForDiagnostic(displayLine, marker.start, marker.end, availableWidth)
           truncatedLine = result.line
-          adjustedColumn = result.adjustedStart
-          adjustedPointerLength = Math.max(1, result.adjustedEnd - result.adjustedStart)
+          markerStart = result.adjustedStart
+          markerLength = Math.max(1, result.adjustedEnd - result.adjustedStart)
         } else {
           truncatedLine = LineWrapper.truncateLine(displayLine, availableWidth)
         }
 
         contextOutput += `${linePrefix}${truncatedLine}\n`
       } else {
-        contextOutput += `${prefix}${lineNumber} ${separator} ${displayLine}\n`
+        contextOutput += `${linePrefix}${displayLine}\n`
       }
 
-      if (isTargetLine) {
-        const pointerPrefix = `        ${colorize("│", "gray")}`
-        const pointerSpacing = " ".repeat(adjustedColumn + 2)
-        const adjustedPointer = colorize(
-          "~".repeat(adjustedPointerLength),
-          color,
-        )
-        contextOutput += `${pointerPrefix}${pointerSpacing}${adjustedPointer}\n`
+      if (marker) {
+        const pointerPrefix = showLineNumbers ? `        ${separator}` : ""
+        const pointerSpacing = " ".repeat(Math.max(0, markerStart + (showLineNumbers ? 1 : 0)))
+        const pointer = colorize("~".repeat(markerLength), color)
+
+        contextOutput += `${pointerPrefix}${pointerSpacing}${pointer}\n`
       }
     }
 
     const highlightedMessage = this.highlightBackticks(diagnostic.message)
     const { suffix } = options
     const suffixText = suffix ? ` ${suffix}` : ""
+    const header = showLineNumbers ? `${fileHeader}\n\n` : ""
 
     return `[${text}] ${highlightedMessage} (${diagnosticId})${suffixText}
 
-${fileHeader}
-
-${contextOutput.trimEnd()}
+${header}${contextOutput.trimEnd()}
 `
   }
 }
diff --git a/javascript/packages/highlighter/src/index.ts b/javascript/packages/highlighter/src/index.ts
index faddfe9ed..de61201f6 100644
--- a/javascript/packages/highlighter/src/index.ts
+++ b/javascript/packages/highlighter/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./color.js"
+export * from "./diagnostic-markers.js"
 export * from "./diagnostic-renderer.js"
 export * from "./file-renderer.js"
 export * from "./highlighter.js"
diff --git a/javascript/packages/highlighter/src/inline-diagnostic-renderer.ts b/javascript/packages/highlighter/src/inline-diagnostic-renderer.ts
index f295b8950..1c2899d8e 100644
--- a/javascript/packages/highlighter/src/inline-diagnostic-renderer.ts
+++ b/javascript/packages/highlighter/src/inline-diagnostic-renderer.ts
@@ -3,9 +3,17 @@ import { TextFormatter } from "./text-formatter.js"
 import { LineWrapper } from "./line-wrapper.js"
 import { GUTTER_WIDTH, MIN_CONTENT_WIDTH } from "./gutter-config.js"
 import { DIAGNOSTIC_SEVERITIES } from "@herb-tools/core"
+import { computeDiagnosticMarkers } from "./diagnostic-markers.js"
 
 import type { Diagnostic, DiagnosticSeverity } from "@herb-tools/core"
 import type { SyntaxRenderer } from "./syntax-renderer.js"
+import type { DiagnosticMarker } from "./diagnostic-markers.js"
+
+interface LineMarker {
+  diagnostic: Diagnostic
+  marker: DiagnosticMarker
+  isLastLine: boolean
+}
 
 export class InlineDiagnosticRenderer {
   private syntaxRenderer: SyntaxRenderer
@@ -40,16 +48,23 @@ export class InlineDiagnosticRenderer {
     codeUrlBuilder?: (code: string) => string,
   ): string {
     const highlightedContent = this.syntaxRenderer.highlight(content)
+    const contentLines = content.split("\n")
 
-    const diagnosticsByLine = new Map<number, Diagnostic[]>()
+    const markersByLine = new Map<number, LineMarker[]>()
     for (const diagnostic of diagnostics) {
-      const lineNumber = diagnostic.location.start.line
+      const markers = computeDiagnosticMarkers(diagnostic.location, contentLines)
 
-      if (!diagnosticsByLine.has(lineNumber)) {
-        diagnosticsByLine.set(lineNumber, [])
-      }
+      markers.forEach((marker, index) => {
+        if (!markersByLine.has(marker.line)) {
+          markersByLine.set(marker.line, [])
+        }
 
-      diagnosticsByLine.get(lineNumber)!.push(diagnostic)
+        markersByLine.get(marker.line)!.push({
+          diagnostic,
+          marker,
+          isLastLine: index === markers.length - 1,
+        })
+      })
     }
 
     const severityOrder: Record<DiagnosticSeverity, number> = {
@@ -59,24 +74,26 @@ export class InlineDiagnosticRenderer {
       "hint": 3
     }
 
-    for (const lineDiagnostics of diagnosticsByLine.values()) {
-      lineDiagnostics.sort((a, b) => {
-        const orderA = severityOrder[a.severity] ?? 99
-        const orderB = severityOrder[b.severity] ?? 99
+    for (const lineMarkers of markersByLine.values()) {
+      lineMarkers.sort((a, b) => {
+        const orderA = severityOrder[a.diagnostic.severity] ?? 99
+        const orderB = severityOrder[b.diagnostic.severity] ?? 99
         return orderA - orderB
       })
     }
 
     const lines = highlightedContent.split("\n")
     let output = showLineNumbers ? `${colorize(path, "cyan")}\n\n` : ""
-    let previousLineHadDiagnostics = false
+    let previousLineHadMessages = false
 
     for (let i = 1; i <= lines.length; i++) {
       const line = lines[i - 1] || ""
-      const lineDiagnostics = diagnosticsByLine.get(i) || []
-      const hasDiagnostics = lineDiagnostics.length > 0
+      const lineMarkers = markersByLine.get(i) || []
+      const lineDiagnostics = lineMarkers.map(({ diagnostic }) => diagnostic)
+      const hasDiagnostics = lineMarkers.length > 0
+      const hasMessages = lineMarkers.some(({ isLastLine }) => isLastLine)
 
-      if (hasDiagnostics && previousLineHadDiagnostics) {
+      if (hasDiagnostics && previousLineHadMessages) {
         output += "\n"
       }
 
@@ -149,56 +166,47 @@ export class InlineDiagnosticRenderer {
       }
 
       if (hasDiagnostics) {
-        for (const diagnostic of lineDiagnostics) {
-          const column = diagnostic.location.start.column - 1
-          const pointerLength = Math.max(
-            1,
-            diagnostic.location.end.column - diagnostic.location.start.column,
+        for (const { diagnostic, marker, isLastLine } of lineMarkers) {
+          const pointerLength = Math.max(1, marker.end - marker.start)
+          const pointer = colorize(
+            "~".repeat(pointerLength),
+            severityColor(diagnostic.severity),
           )
 
+          const severityText = this.getSeverityText(diagnostic.severity)
+          const diagnosticIdText = diagnostic.code || "-"
+          const diagnosticId = codeUrlBuilder && diagnostic.code ? hyperlink(diagnosticIdText, codeUrlBuilder(diagnostic.code)) : diagnosticIdText
+          const highlightedMessage = TextFormatter.highlightBackticks(diagnostic.message)
+          const diagnosticText = `[${severityText}] ${highlightedMessage} (${diagnosticId})`
+          const dimmedDiagnosticText =
+            TextFormatter.applyDimToStyledText(diagnosticText)
+
           if (showLineNumbers) {
             const pointerPrefix = `        ${colorize("│", "gray")}`
-            const pointerSpacing = " ".repeat(column + 2)
-            const pointer = colorize(
-              "~".repeat(pointerLength),
-              severityColor(diagnostic.severity),
-            )
+            const pointerSpacing = " ".repeat(Math.max(0, marker.start + 1))
 
             output += `${pointerPrefix}${pointerSpacing}${pointer}\n`
 
-            const severityText = this.getSeverityText(diagnostic.severity)
-            const diagnosticIdText = diagnostic.code || "-"
-            const diagnosticId = codeUrlBuilder && diagnostic.code ? hyperlink(diagnosticIdText, codeUrlBuilder(diagnostic.code)) : diagnosticIdText
-            const highlightedMessage = TextFormatter.highlightBackticks(diagnostic.message)
-            const diagnosticText = `[${severityText}] ${highlightedMessage} (${diagnosticId})`
-            const dimmedDiagnosticText =
-              TextFormatter.applyDimToStyledText(diagnosticText)
-
-            output += `${pointerPrefix}${pointerSpacing}${dimmedDiagnosticText}\n`
+            if (isLastLine) {
+              output += `${pointerPrefix}${pointerSpacing}${dimmedDiagnosticText}\n`
+            }
           } else {
-            const pointerSpacing = " ".repeat(column)
-            const pointer = colorize(
-              "~".repeat(pointerLength),
-              severityColor(diagnostic.severity),
-            )
+            const pointerSpacing = " ".repeat(Math.max(0, marker.start))
 
             output += `${pointerSpacing}${pointer}\n`
 
-            const severityText = this.getSeverityText(diagnostic.severity)
-            const diagnosticIdText = diagnostic.code || "-"
-            const diagnosticId = codeUrlBuilder && diagnostic.code ? hyperlink(diagnosticIdText, codeUrlBuilder(diagnostic.code)) : diagnosticIdText
-            const highlightedMessage = TextFormatter.highlightBackticks(diagnostic.message)
-            const diagnosticText = `[${severityText}] ${highlightedMessage} (${diagnosticId})`
-            const dimmedDiagnosticText =
-              TextFormatter.applyDimToStyledText(diagnosticText)
-
-            output += `${dimmedDiagnosticText}\n`
+            if (isLastLine) {
+              output += `${dimmedDiagnosticText}\n`
+            }
           }
         }
-        output += "\n"
+
+        if (hasMessages) {
+          output += "\n"
+        }
       }
 
-      previousLineHadDiagnostics = hasDiagnostics
+      previousLineHadMessages = hasMessages
     }
 
     return output.trimEnd()
diff --git a/javascript/packages/highlighter/test/__snapshots__/diagnostic-renderer.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/diagnostic-renderer.test.ts.snap
new file mode 100644
index 000000000..69d14c823
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/diagnostic-renderer.test.ts.snap
@@ -0,0 +1,264 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DiagnosticRenderer > ANSI-aware truncation preserves styling > should preserve colors when extracting from end of styled line 1`] = `
+"[error] End content issue (end-content)
+
+/test/file.erb:1:95
+
+  →   1 │ …-too-long">ShortEnd</div>…
+        │             ~~~~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > ANSI-aware truncation preserves styling > should preserve colors when extracting from middle of styled line 1`] = `
+"[error] Middle issue (middle-content)
+
+/test/file.erb:1:30
+
+  →   1 │ …aaaaaaaaa-MIDDLE_TARGET-bbbbbbbbbb…
+        │             ~~~~~~~~~~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > ANSI-aware truncation preserves styling > should preserve syntax highlighting colors in truncated output 1`] = `
+"[error] Line too long (line-length)
+
+/test/file.erb:1:1
+
+  →   1 │ <div class="this-is-a-very-long-cl…
+        │  ~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > NO_COLOR environment > should respect NO_COLOR environment variable 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <error> content
+        │      ~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > error handling > should handle invalid column numbers gracefully 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:2:999
+
+      1 │ line 1
+  →   2 │ short
+        │                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > error handling > should handle invalid line numbers gracefully 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:999:1
+
+
+"
+`;
+
+exports[`DiagnosticRenderer > multi-line diagnostics > aligns markers to the content when line numbers are hidden 1`] = `
+"[warning] Multi-line offense (multi-line-rule)
+
+
+  <div id="gems">
+    <% @gems.each do |topic_gem| %>
+    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      <%= render partial: "gem_card" %>
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    <% end %>
+    ~~~~~~~~~
+  </div>
+"
+`;
+
+exports[`DiagnosticRenderer > multi-line diagnostics > does not mark blank lines inside the span 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:1:0
+
+  →   1 │ <% if true %>
+        │ ~~~~~~~~~~~~~
+      2 │ 
+  →   3 │ <% end %>
+        │ ~~~~~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > multi-line diagnostics > keeps a single marker for single-line diagnostics 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <error> content
+        │      ~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > multi-line diagnostics > marks every line the diagnostic spans and expands the trailing context off the end line 1`] = `
+"[warning] Multi-line offense (multi-line-rule)
+
+/test/file.erb:4:4
+
+      2 │ 
+      3 │   <div id="gems">
+  →   4 │     <% @gems.each do |topic_gem| %>
+        │     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  →   5 │       <%= render partial: "gem_card" %>
+        │       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  →   6 │     <% end %>
+        │     ~~~~~~~~~
+      7 │   </div>
+      8 │
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should handle custom context lines 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:5:1
+
+      4 │ line 4
+  →   5 │ line 5 error
+        │  ~~~~
+      6 │ line 6
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should handle edge cases for line boundaries 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:1:1
+
+  →   1 │ single line
+        │  ~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should handle multi-character error ranges 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <long error> content
+        │      ~~~~~~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should hide line numbers when requested 1`] = `
+"[error] Test error message (test-rule)
+
+line 1
+line <error> content
+     ~~~~~
+line 3
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should highlight backticks in messages 1`] = `
+"[error] Error with \`code\` in message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <error> content
+        │      ~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should render a single error diagnostic 1`] = `
+"[error] Test error message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <error> content
+        │      ~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > renderSingle > should render a single warning diagnostic 1`] = `
+"[warning] Test error message (test-rule)
+
+/test/file.erb:2:5
+
+      1 │ line 1
+  →   2 │ line <warn> content
+        │      ~~~~~
+      3 │ line 3
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should adjust pointer position correctly for truncated diagnostics 1`] = `
+"[error] Test diagnostic positioning (test-positioning)
+
+/test/file.erb:1:50
+
+  →   1 │ …ame-that-should-be-truncated">Cont…
+        │             ~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should handle truncation with context lines 1`] = `
+"[error] Long class name detected (class-name-length)
+
+/test/file.erb:2:13
+
+      1 │ <div class="short-line">Short</div>
+  →   2 │ <div class="this-is-a-very-long-class-name-t…
+        │              ~~~~~~~~~~~~~~~~~
+      3 │ <div class="another-short-line">Short</div>
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should not truncate when maxWidth is sufficient 1`] = `
+"[error] Test short line (test-short)
+
+/test/file.erb:1:13
+
+  →   1 │ <div class="short">Content</div>
+        │              ~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should show ellipsis at beginning when diagnostic is at end of long line 1`] = `
+"[warning] Content should be more descriptive (content-description)
+
+/test/file.erb:1:95
+
+  →   1 │ …ncated-when-the-line-is-too-long">Content</div>
+        │                                    ~~~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should show ellipsis at end when diagnostic is at start of long line 1`] = `
+"[error] Class name should be shorter (class-name-length)
+
+/test/file.erb:1:13
+
+  →   1 │ <div class="this-is-a-very-long-class-name-t…
+        │              ~~~~~~~~~~~~~~~~~~~~
+"
+`;
+
+exports[`DiagnosticRenderer > smart diagnostic truncation > should show ellipsis on both sides when diagnostic is in middle of long line 1`] = `
+"[error] Avoid 'should-be' in class names (class-naming-convention)
+
+/test/file.erb:1:45
+
+  →   1 │ …-class-name-that-should-be-truncated-when-th…
+        │                ~~~~~~~~~
+"
+`;
diff --git a/javascript/packages/highlighter/test/__snapshots__/file-renderer.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/file-renderer.test.ts.snap
new file mode 100644
index 000000000..66ca15293
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/file-renderer.test.ts.snap
@@ -0,0 +1,143 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FileRenderer > NO_COLOR environment > should respect NO_COLOR environment variable 1`] = `
+"/test/file.erb
+
+      1 │ <div>test</div>"
+`;
+
+exports[`FileRenderer > edge cases > should handle special characters 1`] = `
+"/test/file.erb
+
+      1 │ line with	tabs
+      2 │ line with "quotes"
+      3 │ line with "single quotes""
+`;
+
+exports[`FileRenderer > edge cases > should handle unicode characters 1`] = `
+"/test/file.erb
+
+      1 │ Unicode: 🎉 émojis and àccénts"
+`;
+
+exports[`FileRenderer > edge cases > should handle very long lines 1`] = `
+"/test/file.erb
+
+      1 │ short line
+      2 │ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+      3 │ short line"
+`;
+
+exports[`FileRenderer > line truncation > should not truncate lines shorter than maxWidth 1`] = `
+"/test/file.erb
+
+      1 │ Short line"
+`;
+
+exports[`FileRenderer > line truncation > should truncate lines in renderPlain method 1`] = `"This is another very long line that should be t…"`;
+
+exports[`FileRenderer > line truncation > should truncate long lines with ellipsis 1`] = `
+"/test/file.erb
+
+      1 │ This is a very long line that should …"
+`;
+
+exports[`FileRenderer > renderPlain > should apply syntax highlighting 1`] = `"<div>Hello World</div>"`;
+
+exports[`FileRenderer > renderPlain > should preserve exact content structure 1`] = `
+"line 1
+
+line 3
+    indented line"
+`;
+
+exports[`FileRenderer > renderPlain > should render content without line numbers or file headers 1`] = `
+"line 1
+line 2
+line 3"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should apply syntax highlighting 1`] = `
+"/test/file.erb
+
+      1 │ <div>line 1</div>
+  →   2 │ <span>line 2</span>
+      3 │ <p>line 3</p>"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should handle focus line at beginning of file 1`] = `
+"/test/file.erb
+
+  →   1 │ line 1
+      2 │ line 2"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should handle focus line at end of file 1`] = `
+"/test/file.erb
+
+      2 │ line 2
+  →   3 │ line 3"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should handle large context that exceeds file bounds 1`] = `
+"/test/file.erb
+
+  →   1 │ line 1
+      2 │ line 2"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should highlight focus line and dim others 1`] = `
+"/test/file.erb
+
+      2 │ line 2
+  →   3 │ line 3
+      4 │ line 4"
+`;
+
+exports[`FileRenderer > renderWithFocusLine > should work without line numbers 1`] = `
+"line 1
+line 2
+line 3"
+`;
+
+exports[`FileRenderer > renderWithLineNumbers > should apply syntax highlighting 1`] = `
+"/test/file.erb
+
+      1 │ <div>Hello</div>"
+`;
+
+exports[`FileRenderer > renderWithLineNumbers > should handle content with empty lines 1`] = `
+"/test/file.erb
+
+      1 │ line 1
+      2 │ 
+      3 │ line 3"
+`;
+
+exports[`FileRenderer > renderWithLineNumbers > should handle empty content 1`] = `
+"/test/file.erb
+
+      1 │"
+`;
+
+exports[`FileRenderer > renderWithLineNumbers > should handle single line content 1`] = `
+"/test/file.erb
+
+      1 │ single line"
+`;
+
+exports[`FileRenderer > renderWithLineNumbers > should render content with line numbers 1`] = `
+"/test/file.erb
+
+      1 │ line 1
+      2 │ line 2
+      3 │ line 3"
+`;
+
+exports[`FileRenderer > theme support > should work with different themes 1`] = `
+"/test/file.erb
+
+      1 │ <div>test</div>"
+`;
+
+exports[`FileRenderer > theme support > should work with simple theme 1`] = `"<span>test</span>"`;
diff --git a/javascript/packages/highlighter/test/__snapshots__/highlighter.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/highlighter.test.ts.snap
new file mode 100644
index 000000000..2aeb446b5
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/highlighter.test.ts.snap
@@ -0,0 +1,118 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Highlighter > highlightFile method > should highlight a file 1`] = `
+"<test-dir>/test-highlighter-file.html.erb
+
+      1 │ <div class="container">
+      2 │   <% if user %>
+      3 │     <span>Hello <%= user.name %>!</span>
+      4 │   <% end %>
+      5 │ </div>"
+`;
+
+exports[`Highlighter > should handle ERB output tags 1`] = `"<%= user.name %>"`;
+
+exports[`Highlighter > should handle all Ruby keywords correctly 1`] = `
+[
+  "<% if %>",
+  "<% unless %>",
+  "<% else %>",
+  "<% elsif %>",
+  "<% end %>",
+  "<% def %>",
+  "<% class %>",
+  "<% module %>",
+  "<% return %>",
+  "<% yield %>",
+  "<% break %>",
+  "<% next %>",
+  "<% case %>",
+  "<% when %>",
+  "<% then %>",
+  "<% while %>",
+  "<% until %>",
+  "<% for %>",
+  "<% in %>",
+  "<% do %>",
+  "<% begin %>",
+  "<% rescue %>",
+  "<% ensure %>",
+  "<% retry %>",
+  "<% raise %>",
+  "<% super %>",
+  "<% self %>",
+  "<% nil %>",
+  "<% true %>",
+  "<% false %>",
+  "<% and %>",
+  "<% or %>",
+  "<% not %>",
+]
+`;
+
+exports[`Highlighter > should handle mixed HTML and ERB content 1`] = `"<h1 id="<%= dom_id(article) %>">Title</h1>"`;
+
+exports[`Highlighter > should highlight ERB blocks with Ruby syntax 1`] = `"<% if true %>"`;
+
+exports[`Highlighter > should highlight HTML attributes 1`] = `"<div class="example" id="test">"`;
+
+exports[`Highlighter > should highlight basic HTML tags 1`] = `"<h1>Hello</h1>"`;
+
+exports[`Highlighter > should highlight complex ERB with if/elsif/else/end 1`] = `
+"<% if condition %>
+    <div>One</div>
+<% elsif other %>
+    <div>Two</div>
+<% else %>
+    <div>Three</div>
+<% end %>"
+`;
+
+exports[`Highlighter > should not add colors when NO_COLOR is set 1`] = `"<% if true %>"`;
+
+exports[`Standalone utility functions > highlightContent should work with default theme 1`] = `
+"
+
+      1 │ <% def hello %><span>Hi</span><% end %>"
+`;
+
+exports[`Standalone utility functions > highlightContent should work with github-light theme 1`] = `
+"
+
+      1 │ <% true %>"
+`;
+
+exports[`Standalone utility functions > highlightFile should work with default theme 1`] = `
+"<test-file>
+
+      1 │ <h1>
+      2 │   <% unless condition %>
+      3 │     <p>Default content</p>
+      4 │   <% end %>
+      5 │ </h1>"
+`;
+
+exports[`Standalone utility functions > highlightFile should work with simple theme 1`] = `
+"<test-file>
+
+      1 │ <h1>
+      2 │   <% unless condition %>
+      3 │     <p>Default content</p>
+      4 │   <% end %>
+      5 │ </h1>"
+`;
+
+exports[`Standalone utility functions > should support focusLine with contextLines 1`] = `
+"test.erb
+
+      2 │ <div class="container">
+  →   3 │   <% if user %>
+      4 │     <span>Welcome</span>"
+`;
+
+exports[`Standalone utility functions > should support truncateLines option 1`] = `
+"test.erb
+
+      1 │ <div class="this-is-a-very-long-class-name-that…
+      2 │ <span>Short line</span>"
+`;
diff --git a/javascript/packages/highlighter/test/__snapshots__/inline-diagnostic-renderer.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/inline-diagnostic-renderer.test.ts.snap
new file mode 100644
index 000000000..bfb9ce073
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/inline-diagnostic-renderer.test.ts.snap
@@ -0,0 +1,48 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InlineDiagnosticRenderer > marks every line a multi-line diagnostic spans 1`] = `
+"/test/file.erb
+
+      1 │ <div id="gems">
+  →   2 │   <% @gems.each do |topic_gem| %>
+        │   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  →   3 │     <%= render partial: "gem_card" %>
+        │     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  →   4 │   <% end %>
+        │   ~~~~~~~~~
+        │   [warning] Multi-line offense (multi-line-rule)
+
+      5 │ </div>"
+`;
+
+exports[`InlineDiagnosticRenderer > renders a single-line diagnostic with its message under the marker 1`] = `
+"/test/file.erb
+
+      1 │ line 1
+  →   2 │ line <error> content
+        │      ~~~~~
+        │      [error] Test error message (test-rule)
+
+      3 │ line 3"
+`;
+
+exports[`InlineDiagnosticRenderer > renders markers without line numbers 1`] = `
+"line 1
+line <error> content
+     ~~~~~
+[error] Test error message (test-rule)
+
+line 3"
+`;
+
+exports[`InlineDiagnosticRenderer > renders the message once, under the last line of a multi-line diagnostic 1`] = `
+"/test/file.erb
+
+  →   1 │ <% if true %>
+        │ ~~~~~~~~~~~~~
+  →   2 │   <span>content</span>
+        │   ~~~~~~~~~~~~~~~~~~~~
+  →   3 │ <% end %>
+        │ ~~~~~~~~~
+        │ [error] Multi-line offense (test-rule)"
+`;
diff --git a/javascript/packages/highlighter/test/__snapshots__/integration.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/integration.test.ts.snap
new file mode 100644
index 000000000..859067bf7
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/integration.test.ts.snap
@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`herb-highlight CLI > should highlight file via CLI 1`] = `
+"<test-file>
+
+      1 │ <h1 class="title">
+      2 │   <% if user.present? %>
+      3 │     Welcome <%= user.name %>!
+      4 │   <% else %>
+      5 │     Please sign in
+      6 │   <% end %>
+      7 │ </h1>
+"
+`;
+
+exports[`herb-highlight CLI > should respect NO_COLOR environment variable 1`] = `
+"<test-file>
+
+      1 │ <h1 class="title">
+      2 │   <% if user.present? %>
+      3 │     Welcome <%= user.name %>!
+      4 │   <% else %>
+      5 │     Please sign in
+      6 │   <% end %>
+      7 │ </h1>
+"
+`;
+
+exports[`herb-highlight CLI > should support --context-lines option 1`] = `
+"<test-file>
+
+      2 │   <% if user.present? %>
+  →   3 │     Welcome <%= user.name %>!
+      4 │   <% else %>
+"
+`;
+
+exports[`herb-highlight CLI > should support --focus option 1`] = `
+"<test-file>
+
+      1 │ <h1 class="title">
+      2 │   <% if user.present? %>
+  →   3 │     Welcome <%= user.name %>!
+      4 │   <% else %>
+      5 │     Please sign in
+"
+`;
diff --git a/javascript/packages/highlighter/test/__snapshots__/syntax-renderer.test.ts.snap b/javascript/packages/highlighter/test/__snapshots__/syntax-renderer.test.ts.snap
new file mode 100644
index 000000000..f1acde6cb
--- /dev/null
+++ b/javascript/packages/highlighter/test/__snapshots__/syntax-renderer.test.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SyntaxRenderer > ERB content highlighting > should highlight Ruby keywords in ERB blocks 1`] = `"<% if true %>"`;
+
+exports[`SyntaxRenderer > color disabled mode > should return plain text when NO_COLOR is set 1`] = `"<div>test</div>"`;
+
+exports[`SyntaxRenderer > comment state tracking > should preserve ERB highlighting in comments 1`] = `"<!-- <% code %> -->"`;
+
+exports[`SyntaxRenderer > comment state tracking > should track HTML comment state 1`] = `"<!-- comment -->"`;
+
+exports[`SyntaxRenderer > highlight > should highlight simple HTML 1`] = `"<div>hello</div>"`;
+
+exports[`SyntaxRenderer > theme support > should work with different themes 1`] = `"<div>test</div>"`;
+
+exports[`SyntaxRenderer > theme support > should work with simple theme 1`] = `"<div>test</div>"`;
diff --git a/javascript/packages/highlighter/test/diagnostic-markers.test.ts b/javascript/packages/highlighter/test/diagnostic-markers.test.ts
new file mode 100644
index 000000000..80ce82bfa
--- /dev/null
+++ b/javascript/packages/highlighter/test/diagnostic-markers.test.ts
@@ -0,0 +1,103 @@
+import { describe, it, expect } from "vitest"
+import dedent from "dedent"
+
+import { computeDiagnosticMarkers } from "../src/diagnostic-markers.js"
+
+import type { SerializedLocation } from "@herb-tools/core"
+
+const location = (startLine: number, startColumn: number, endLine: number, endColumn: number): SerializedLocation => ({
+  start: { line: startLine, column: startColumn },
+  end: { line: endLine, column: endColumn },
+})
+
+describe("computeDiagnosticMarkers", () => {
+  it("returns a single marker for a single-line diagnostic", () => {
+    const lines = dedent`
+      <div>
+        <span>content</span>
+      </div>
+    `.split("\n")
+
+    expect(computeDiagnosticMarkers(location(2, 2, 2, 8), lines)).toEqual([
+      { line: 2, start: 2, end: 8 },
+    ])
+  })
+
+  it("returns a marker per line for a multi-line diagnostic", () => {
+    const lines = dedent`
+      <div id="gems">
+        <% @gems.each do |topic_gem| %>
+          <%= render partial: "gem_card" %>
+        <% end %>
+      </div>
+    `.split("\n")
+
+    expect(computeDiagnosticMarkers(location(2, 2, 4, 11), lines)).toEqual([
+      { line: 2, start: 2, end: 33 },
+      { line: 3, start: 4, end: 37 },
+      { line: 4, start: 2, end: 11 },
+    ])
+  })
+
+  it("marks intermediate lines across their non-whitespace content only", () => {
+    const lines = dedent`
+      <% if true %>
+            indented${"      "}
+      <% end %>
+    `.split("\n")
+
+    expect(computeDiagnosticMarkers(location(1, 0, 3, 9), lines)).toEqual([
+      { line: 1, start: 0, end: 13 },
+      { line: 2, start: 6, end: 14 },
+      { line: 3, start: 0, end: 9 },
+    ])
+  })
+
+  it("skips blank and whitespace-only lines inside the span", () => {
+    const lines = dedent`
+      <% if true %>
+
+      ${"    "}
+      <% end %>
+    `.split("\n")
+
+    const markers = computeDiagnosticMarkers(location(1, 0, 4, 9), lines)
+
+    expect(markers.map(marker => marker.line)).toEqual([1, 4])
+  })
+
+  it("skips the last line when the diagnostic ends at its first column", () => {
+    const lines = dedent`
+      <% if true %>
+        content
+      <% end %>
+    `.split("\n")
+
+    const markers = computeDiagnosticMarkers(location(1, 0, 3, 0), lines)
+
+    expect(markers.map(marker => marker.line)).toEqual([1, 2])
+  })
+
+  it("falls back to a single-character marker for a zero-width diagnostic", () => {
+    const lines = dedent`
+      <div>
+        <span>
+      </div>
+    `.split("\n")
+
+    expect(computeDiagnosticMarkers(location(2, 4, 2, 4), lines)).toEqual([
+      { line: 2, start: 4, end: 5 },
+    ])
+  })
+
+  it("clamps the end line to the available content", () => {
+    const lines = dedent`
+      <% if true %>
+        content
+    `.split("\n")
+
+    const markers = computeDiagnosticMarkers(location(1, 0, 99, 5), lines)
+
+    expect(markers.map(marker => marker.line)).toEqual([1, 2])
+  })
+})
diff --git a/javascript/packages/highlighter/test/diagnostic-renderer.test.ts b/javascript/packages/highlighter/test/diagnostic-renderer.test.ts
index cb2eaef63..0923b76f0 100644
--- a/javascript/packages/highlighter/test/diagnostic-renderer.test.ts
+++ b/javascript/packages/highlighter/test/diagnostic-renderer.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, beforeEach } from "vitest"
+import dedent from "dedent"
 
 import { themes } from "../src/themes.js"
 import { ANSI_REGEX } from "../src/color.js"
@@ -35,33 +36,34 @@ describe("DiagnosticRenderer", () => {
   describe("renderSingle", () => {
     it("should render a single error diagnostic", () => {
       const diagnostic = createDiagnostic()
-      const content = "line 1\nline <error> content\nline 3"
+      const content = dedent`
+        line 1
+        line <error> content
+        line 3
+      `
       const result = renderer.renderSingle(
         "/test/file.erb",
         diagnostic,
         content,
       )
 
-      expect(result).toMatch(/\[.*error.*\]/)
-      expect(result).toContain("Test error message")
-      expect(result).toContain("test-rule")
-      expect(result).toMatch(/\/test\/file\.erb.*2:5/)
-      expect(result).toContain("→")
-      expect(result).toMatch(/~{5}/)
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should render a single warning diagnostic", () => {
       const diagnostic = createDiagnostic({ severity: "warning" })
-      const content = "line 1\nline <warn> content\nline 3"
+      const content = dedent`
+        line 1
+        line <warn> content
+        line 3
+      `
       const result = renderer.renderSingle(
         "/test/file.erb",
         diagnostic,
         content,
       )
 
-      expect(result).toMatch(/\[.*warning.*\]/)
-      expect(result).toContain("Test error message")
-      expect(result).toContain("test-rule")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle custom context lines", () => {
@@ -71,8 +73,15 @@ describe("DiagnosticRenderer", () => {
           end: { line: 5, column: 5 },
         },
       })
-      const content =
-        "line 1\nline 2\nline 3\nline 4\nline 5 error\nline 6\nline 7"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+        line 4
+        line 5 error
+        line 6
+        line 7
+      `
 
       const result = renderer.renderSingle(
         "/test/file.erb",
@@ -81,16 +90,16 @@ describe("DiagnosticRenderer", () => {
         { contextLines: 1 },
       )
 
-      expect(result).toMatch(/line.*4/)
-      expect(result).toMatch(/line.*5.*error/)
-      expect(result).toMatch(/line.*6/)
-      expect(result).not.toMatch(/\s+3\s+│/)
-      expect(result).not.toMatch(/\s+7\s+│/)
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should hide line numbers when requested", () => {
       const diagnostic = createDiagnostic()
-      const content = "line 1\nline <error> content\nline 3"
+      const content = dedent`
+        line 1
+        line <error> content
+        line 3
+      `
       const result = renderer.renderSingle(
         "/test/file.erb",
         diagnostic,
@@ -98,8 +107,7 @@ describe("DiagnosticRenderer", () => {
         { showLineNumbers: false },
       )
 
-      expect(result).not.toMatch(/\d+\s*│/)
-      expect(result).toContain("Test error message")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle edge cases for line boundaries", () => {
@@ -118,22 +126,25 @@ describe("DiagnosticRenderer", () => {
         { contextLines: 5 },
       )
 
-      expect(result).toMatch(/single.*line/)
-      expect(result).toContain("→")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should highlight backticks in messages", () => {
       const diagnostic = createDiagnostic({
         message: "Error with `code` in message",
       })
-      const content = "line 1\nline <error> content\nline 3"
+      const content = dedent`
+        line 1
+        line <error> content
+        line 3
+      `
       const result = renderer.renderSingle(
         "/test/file.erb",
         diagnostic,
         content,
       )
 
-      expect(result).toContain("`code`")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle multi-character error ranges", () => {
@@ -143,14 +154,18 @@ describe("DiagnosticRenderer", () => {
           end: { line: 2, column: 15 },
         },
       })
-      const content = "line 1\nline <long error> content\nline 3"
+      const content = dedent`
+        line 1
+        line <long error> content
+        line 3
+      `
       const result = renderer.renderSingle(
         "/test/file.erb",
         diagnostic,
         content,
       )
 
-      expect(result).toMatch(/~{10}/)
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
   })
 
@@ -162,7 +177,10 @@ describe("DiagnosticRenderer", () => {
           end: { line: 999, column: 5 },
         },
       })
-      const content = "line 1\nline 2"
+      const content = dedent`
+        line 1
+        line 2
+      `
 
       const result = renderer.renderSingle(
         "/test/file.erb",
@@ -170,8 +188,7 @@ describe("DiagnosticRenderer", () => {
         content,
       )
 
-      expect(result).toContain("Test error message")
-      expect(result).toContain("test-rule")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle invalid column numbers gracefully", () => {
@@ -181,7 +198,11 @@ describe("DiagnosticRenderer", () => {
           end: { line: 2, column: 1000 },
         },
       })
-      const content = "line 1\nshort\nline 3"
+      const content = dedent`
+        line 1
+        short
+        line 3
+      `
 
       const result = renderer.renderSingle(
         "/test/file.erb",
@@ -189,8 +210,80 @@ describe("DiagnosticRenderer", () => {
         content,
       )
 
-      expect(result).toContain("Test error message")
-      expect(result).toContain("short")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
+    })
+  })
+
+  describe("multi-line diagnostics", () => {
+    const multiLineContent = dedent`
+      <div>
+
+        <div id="gems">
+          <% @gems.each do |topic_gem| %>
+            <%= render partial: "gem_card" %>
+          <% end %>
+        </div>
+
+      </div>
+    `
+
+    const multiLineDiagnostic = createDiagnostic({
+      message: "Multi-line offense",
+      severity: "warning",
+      location: {
+        start: { line: 4, column: 4 },
+        end: { line: 6, column: 13 },
+      },
+      code: "multi-line-rule",
+    })
+
+    it("marks every line the diagnostic spans and expands the trailing context off the end line", () => {
+      const result = renderer.renderSingle("/test/file.erb", multiLineDiagnostic, multiLineContent, {
+        wrapLines: false,
+        contextLines: 2,
+      })
+
+      expect(stripAnsiColors(result)).toMatchSnapshot()
+    })
+
+    it("does not mark blank lines inside the span", () => {
+      const content = dedent`
+        <% if true %>
+
+        <% end %>
+      `
+
+      const diagnostic = createDiagnostic({
+        location: {
+          start: { line: 1, column: 0 },
+          end: { line: 3, column: 9 },
+        },
+      })
+
+      const result = renderer.renderSingle("/test/file.erb", diagnostic, content, { wrapLines: false })
+
+      expect(stripAnsiColors(result)).toMatchSnapshot()
+    })
+
+    it("aligns markers to the content when line numbers are hidden", () => {
+      const result = renderer.renderSingle("/test/file.erb", multiLineDiagnostic, multiLineContent, {
+        wrapLines: false,
+        contextLines: 2,
+        showLineNumbers: false,
+      })
+
+      expect(stripAnsiColors(result)).toMatchSnapshot()
+    })
+
+    it("keeps a single marker for single-line diagnostics", () => {
+      const content = dedent`
+        line 1
+        line <error> content
+        line 3
+      `
+      const result = renderer.renderSingle("/test/file.erb", createDiagnostic(), content, { wrapLines: false })
+
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
   })
 
@@ -217,12 +310,7 @@ describe("DiagnosticRenderer", () => {
         }
       )
 
-      const strippedResult = stripAnsiColors(result)
-
-      expect(strippedResult).toContain("…")
-      expect(strippedResult).toContain("this-is-a-very-long")
-      expect(strippedResult).not.toContain("Content</div>")
-      expect(result).toContain("Class name should be shorter")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should show ellipsis at beginning when diagnostic is at end of long line", () => {
@@ -248,12 +336,7 @@ describe("DiagnosticRenderer", () => {
         }
       )
 
-      const strippedResult = stripAnsiColors(result)
-
-      expect(strippedResult).toContain("…")
-      expect(strippedResult).toContain("Content")
-      expect(strippedResult).not.toContain("this-is-a-very-long")
-      expect(result).toContain("Content should be more descriptive")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should show ellipsis on both sides when diagnostic is in middle of long line", () => {
@@ -278,14 +361,7 @@ describe("DiagnosticRenderer", () => {
         }
       )
 
-      const strippedResult = stripAnsiColors(result)
-
-      const ellipsisCount = (strippedResult.match(/…/g) || []).length
-      expect(ellipsisCount).toBeGreaterThanOrEqual(2)
-      expect(strippedResult).toContain("should-be")
-      expect(strippedResult).not.toContain("this-is-a-very")
-      expect(strippedResult).not.toContain("Content</div>")
-      expect(result).toContain("Avoid 'should-be' in class names")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should adjust pointer position correctly for truncated diagnostics", () => {
@@ -310,14 +386,15 @@ describe("DiagnosticRenderer", () => {
         }
       )
 
-      expect(result).toMatch(/~{5}/)
-      expect(result).toContain("…")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle truncation with context lines", () => {
-      const content = `<div class="short-line">Short</div>
-<div class="this-is-a-very-long-class-name-that-should-be-truncated-when-the-line-is-too-long">Content</div>
-<div class="another-short-line">Short</div>`
+      const content = dedent`
+        <div class="short-line">Short</div>
+        <div class="this-is-a-very-long-class-name-that-should-be-truncated-when-the-line-is-too-long">Content</div>
+        <div class="another-short-line">Short</div>
+      `
 
       const diagnostic = createDiagnostic({
         message: "Long class name detected",
@@ -339,12 +416,7 @@ describe("DiagnosticRenderer", () => {
         }
       )
 
-      const strippedResult = stripAnsiColors(result)
-
-      expect(strippedResult).toContain("short-line")
-      expect(strippedResult).toContain("another-short-line")
-      expect(strippedResult).toContain("…")
-      expect(result).toContain("Long class name detected")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should not truncate when maxWidth is sufficient", () => {
@@ -372,8 +444,7 @@ describe("DiagnosticRenderer", () => {
       const strippedResult = stripAnsiColors(result)
 
       expect(strippedResult).not.toContain("…")
-      expect(strippedResult).toContain("short")
-      expect(strippedResult).toContain("Content")
+      expect(strippedResult).toMatchSnapshot()
     })
   })
 
@@ -398,8 +469,7 @@ describe("DiagnosticRenderer", () => {
       )
 
       expect(result).toMatch(ANSI_REGEX)
-      const strippedResult = stripAnsiColors(result)
-      expect(strippedResult).toContain("…")
+      expect(result).toMatchSnapshot()
     })
 
     it("should preserve colors when extracting from end of styled line", () => {
@@ -421,9 +491,8 @@ describe("DiagnosticRenderer", () => {
         { truncateLines: true, maxWidth: 50 },
       )
 
-      const strippedResult = stripAnsiColors(result)
-      expect(strippedResult).toContain("ShortEnd")
       expect(result).toMatch(ANSI_REGEX)
+      expect(result).toMatchSnapshot()
     })
 
     it("should preserve colors when extracting from middle of styled line", () => {
@@ -445,9 +514,8 @@ describe("DiagnosticRenderer", () => {
         { truncateLines: true, maxWidth: 50 },
       )
 
-      const strippedResult = stripAnsiColors(result)
-      expect(strippedResult).toContain("MIDDLE_TARGET")
       expect(result).toMatch(ANSI_REGEX)
+      expect(result).toMatchSnapshot()
     })
   })
 
@@ -458,7 +526,11 @@ describe("DiagnosticRenderer", () => {
 
       try {
         const diagnostic = createDiagnostic()
-        const content = "line 1\nline <error> content\nline 3"
+        const content = dedent`
+          line 1
+          line <error> content
+          line 3
+        `
         const result = renderer.renderSingle(
           "/test/file.erb",
           diagnostic,
@@ -466,7 +538,7 @@ describe("DiagnosticRenderer", () => {
         )
 
         expect(result).not.toMatch(ANSI_REGEX)
-        expect(result).toContain("Test error message")
+        expect(result).toMatchSnapshot()
       } finally {
         if (originalNoColor === undefined) {
           delete process.env.NO_COLOR
diff --git a/javascript/packages/highlighter/test/file-renderer.test.ts b/javascript/packages/highlighter/test/file-renderer.test.ts
index 98f43c07d..8d57409ad 100644
--- a/javascript/packages/highlighter/test/file-renderer.test.ts
+++ b/javascript/packages/highlighter/test/file-renderer.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, beforeEach } from "vitest"
+import dedent from "dedent"
 
 import { themes } from "../src/themes.js"
 import { stripAnsiColors } from "./util.js"
@@ -18,53 +19,58 @@ describe("FileRenderer", () => {
 
   describe("renderWithLineNumbers", () => {
     it("should render content with line numbers", () => {
-      const content = "line 1\nline 2\nline 3"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+      `
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("  1 │ line 1")
-      expect(stripAnsiColors(result)).toContain("  2 │ line 2")
-      expect(stripAnsiColors(result)).toContain("  3 │ line 3")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle single line content", () => {
       const content = "single line"
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("  1 │ single line")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle empty content", () => {
       const content = ""
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("  1 │")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle content with empty lines", () => {
-      const content = "line 1\n\nline 3"
+      const content = dedent`
+        line 1
+
+        line 3
+      `
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("1 │ line 1")
-      expect(stripAnsiColors(result)).toContain("  2 │")
-      expect(stripAnsiColors(result)).toContain("3 │ line 3")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should apply syntax highlighting", () => {
       const content = "<div>Hello</div>"
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("div")
-      expect(stripAnsiColors(result)).toContain("Hello")
+      expect(result).toMatchSnapshot()
     })
   })
 
   describe("renderWithFocusLine", () => {
     it("should highlight focus line and dim others", () => {
-      const content = "line 1\nline 2\nline 3\nline 4\nline 5"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+        line 4
+        line 5
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -73,17 +79,15 @@ describe("FileRenderer", () => {
         true,
       )
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("→") // Focus line indicator
-      expect(stripAnsiColors(result)).toContain("  2 │") // Context line above
-      expect(stripAnsiColors(result)).toContain("  3 │") // Focus line
-      expect(stripAnsiColors(result)).toContain("4 │") // Context line below
-      expect(stripAnsiColors(result)).not.toContain("1 │") // Outside context
-      expect(stripAnsiColors(result)).not.toContain("5 │") // Outside context
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle focus line at beginning of file", () => {
-      const content = "line 1\nline 2\nline 3"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -92,13 +96,15 @@ describe("FileRenderer", () => {
         true,
       )
 
-      expect(stripAnsiColors(result)).toContain("  1 │") // Focus line
-      expect(stripAnsiColors(result)).toContain("  2 │") // Context line
-      expect(stripAnsiColors(result)).not.toContain("3 │") // Outside context
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle focus line at end of file", () => {
-      const content = "line 1\nline 2\nline 3"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -107,13 +113,14 @@ describe("FileRenderer", () => {
         true,
       )
 
-      expect(stripAnsiColors(result)).toContain("  2 │") // Context line
-      expect(stripAnsiColors(result)).toContain("  3 │") // Focus line
-      expect(stripAnsiColors(result)).not.toContain("1 │") // Outside context
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle large context that exceeds file bounds", () => {
-      const content = "line 1\nline 2"
+      const content = dedent`
+        line 1
+        line 2
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -122,12 +129,15 @@ describe("FileRenderer", () => {
         true,
       )
 
-      expect(stripAnsiColors(result)).toContain("  1 │") // Focus line
-      expect(stripAnsiColors(result)).toContain("  2 │") // All available context
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should work without line numbers", () => {
-      const content = "line 1\nline 2\nline 3"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -136,15 +146,15 @@ describe("FileRenderer", () => {
         false,
       )
 
-      expect(stripAnsiColors(result)).not.toContain("/test/file.erb") // No file header
-      expect(stripAnsiColors(result)).not.toMatch(/\d+ │/) // No line numbers
-      expect(stripAnsiColors(result)).toContain("line 1")
-      expect(stripAnsiColors(result)).toContain("line 2")
-      expect(stripAnsiColors(result)).toContain("line 3")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should apply syntax highlighting", () => {
-      const content = "<div>line 1</div>\n<span>line 2</span>\n<p>line 3</p>"
+      const content = dedent`
+        <div>line 1</div>
+        <span>line 2</span>
+        <p>line 3</p>
+      `
       const result = renderer.renderWithFocusLine(
         "/test/file.erb",
         content,
@@ -153,30 +163,27 @@ describe("FileRenderer", () => {
         true,
       )
 
-      expect(stripAnsiColors(result)).toContain("div")
-      expect(stripAnsiColors(result)).toContain("span")
-      expect(stripAnsiColors(result)).toContain("→") // Focus line indicator
+      expect(result).toMatchSnapshot()
     })
   })
 
   describe("renderPlain", () => {
     it("should render content without line numbers or file headers", () => {
-      const content = "line 1\nline 2\nline 3"
+      const content = dedent`
+        line 1
+        line 2
+        line 3
+      `
       const result = renderer.renderPlain(content)
 
-      expect(stripAnsiColors(result)).not.toContain("│") // No line separators
-      expect(stripAnsiColors(result)).not.toMatch(/\s+\d+\s*│/) // No line numbers
-      expect(stripAnsiColors(result)).toContain("line 1")
-      expect(stripAnsiColors(result)).toContain("line 2")
-      expect(stripAnsiColors(result)).toContain("line 3")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should apply syntax highlighting", () => {
       const content = "<div>Hello World</div>"
       const result = renderer.renderPlain(content)
 
-      expect(stripAnsiColors(result)).toContain("div")
-      expect(stripAnsiColors(result)).toContain("Hello World")
+      expect(result).toMatchSnapshot()
     })
 
     it("should handle empty content", () => {
@@ -187,10 +194,16 @@ describe("FileRenderer", () => {
     })
 
     it("should preserve exact content structure", () => {
-      const content = "line 1\n\nline 3\n    indented line"
+      const content = dedent`
+        line 1
+
+        line 3
+            indented line
+      `
       const result = renderer.renderPlain(content)
 
-      expect(stripAnsiColors(result)).toContain("line 1\n\nline 3\n    indented line")
+      expect(stripAnsiColors(result)).toContain(content)
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
   })
 
@@ -206,8 +219,7 @@ describe("FileRenderer", () => {
         content,
       )
 
-      expect(stripAnsiColors(result)).toContain("/test/file.erb")
-      expect(stripAnsiColors(result)).toContain("div")
+      expect(result).toMatchSnapshot()
     })
 
     it("should work with simple theme", async () => {
@@ -218,8 +230,7 @@ describe("FileRenderer", () => {
       const content = "<span>test</span>"
       const result = simpleFileRenderer.renderPlain(content)
 
-      expect(stripAnsiColors(result)).toContain("span")
-      expect(stripAnsiColors(result)).toContain("test")
+      expect(result).toMatchSnapshot()
     })
   })
 
@@ -228,18 +239,14 @@ describe("FileRenderer", () => {
       const longContent = "This is a very long line that should be truncated when it exceeds the maximum width limit"
       const result = renderer.renderWithLineNumbers("/test/file.erb", longContent, false, 50, true)
 
-      const strippedResult = stripAnsiColors(result)
-      expect(strippedResult).toContain("…")
-      expect(strippedResult).not.toContain("maximum width limit") // This part should be cut off
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should truncate lines in renderPlain method", () => {
       const longContent = "This is another very long line that should be truncated when using renderPlain method"
       const result = renderer.renderPlain(longContent, 50, false, true)
 
-      const strippedResult = stripAnsiColors(result)
-      expect(strippedResult).toContain("…")
-      expect(strippedResult).not.toContain("renderPlain method") // This part should be cut off
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should not truncate lines shorter than maxWidth", () => {
@@ -247,8 +254,9 @@ describe("FileRenderer", () => {
       const result = renderer.renderWithLineNumbers("/test/file.erb", shortContent, false, 50, true)
 
       const strippedResult = stripAnsiColors(result)
+
       expect(strippedResult).not.toContain("…")
-      expect(strippedResult).toContain("Short line")
+      expect(strippedResult).toMatchSnapshot()
     })
   })
 
@@ -261,10 +269,7 @@ describe("FileRenderer", () => {
         const content = "<div>test</div>"
         const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-        // Should not contain ANSI escape codes (except for structure)
-        expect(stripAnsiColors(result)).toContain("/test/file.erb")
-        expect(stripAnsiColors(result)).toContain("div")
-        expect(stripAnsiColors(result)).toContain("test")
+        expect(result).toMatchSnapshot()
       } finally {
         if (originalNoColor === undefined) {
           delete process.env.NO_COLOR
@@ -278,29 +283,33 @@ describe("FileRenderer", () => {
   describe("edge cases", () => {
     it("should handle very long lines", () => {
       const longLine = "a".repeat(1000)
-      const content = `short line\n${longLine}\nshort line`
+      const content = dedent`
+        short line
+        ${longLine}
+        short line
+      `
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("short line")
       expect(stripAnsiColors(result)).toContain(longLine)
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle special characters", () => {
-      const content = `line with\ttabs\nline with "quotes"\nline with "single quotes"`
+      const content = dedent`
+        line with\ttabs
+        line with "quotes"
+        line with "single quotes"
+      `
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("tabs")
-      expect(stripAnsiColors(result)).toContain(`quotes"`)
-      expect(stripAnsiColors(result)).toContain('"single quotes"')
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
 
     it("should handle unicode characters", () => {
       const content = "Unicode: 🎉 émojis and àccénts"
       const result = renderer.renderWithLineNumbers("/test/file.erb", content)
 
-      expect(stripAnsiColors(result)).toContain("🎉")
-      expect(stripAnsiColors(result)).toContain("émojis")
-      expect(stripAnsiColors(result)).toContain("àccénts")
+      expect(stripAnsiColors(result)).toMatchSnapshot()
     })
   })
 })
diff --git a/javascript/packages/highlighter/test/highlighter.test.ts b/javascript/packages/highlighter/test/highlighter.test.ts
index 142735754..c8293d5ac 100644
--- a/javascript/packages/highlighter/test/highlighter.test.ts
+++ b/javascript/packages/highlighter/test/highlighter.test.ts
@@ -9,6 +9,7 @@ import {
   afterEach,
   afterAll,
 } from "vitest"
+import dedent from "dedent"
 
 import { Herb } from "@herb-tools/node-wasm"
 import { ANSI_REGEX } from "../src/color.js"
@@ -32,8 +33,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;224;108;117m<\x1b[0m")  // red "<"
-    expect(result).toContain("\x1b[38;2;224;108;117mh1\x1b[0m") // red "h1"
+    expect(result).toMatchSnapshot()
   })
 
   test("should highlight ERB blocks with Ruby syntax", () => {
@@ -42,10 +42,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;198;120;221mif\x1b[0m")   // purple "if"
-    expect(result).toContain("\x1b[38;2;198;120;221mtrue\x1b[0m") // purple "true"
-
-    expect(result).not.toContain("[38;2;209;154;102m38") // corrupted pattern
+    expect(result).toMatchSnapshot()
   })
 
   test("should highlight complex ERB with if/elsif/else/end", () => {
@@ -61,12 +58,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;198;120;221mif\x1b[0m")
-    expect(result).toContain("\x1b[38;2;198;120;221melsif\x1b[0m")
-    expect(result).toContain("\x1b[38;2;198;120;221melse\x1b[0m")
-    expect(result).toContain("\x1b[38;2;198;120;221mend\x1b[0m")
-
-    expect(result).not.toMatch(/\[38;2;\d+;\d+;\d+m\d+/)
+    expect(result).toMatchSnapshot()
   })
 
   test("should highlight HTML attributes", () => {
@@ -75,9 +67,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;209;154;102mclass\x1b[0m")   // orange attribute name
-    expect(result).toContain("\x1b[38;2;152;195;121mexample\x1b[0m") // green string content
-    expect(result).toContain("\x1b[38;2;152;195;121mtest\x1b[0m")    // green string content
+    expect(result).toMatchSnapshot()
   })
 
   test("should handle ERB output tags", () => {
@@ -86,8 +76,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;190;80;70m<%=\x1b[0m") // ERB start
-    expect(result).toContain("\x1b[38;2;190;80;70m%>\x1b[0m")  // ERB end
+    expect(result).toMatchSnapshot()
   })
 
   test("should not add colors when NO_COLOR is set", async () => {
@@ -101,7 +90,7 @@ describe("Highlighter", () => {
     })
 
     expect(result).toBe(input)
-    expect(result).not.toContain("\x1b[")
+    expect(result).toMatchSnapshot()
 
     delete process.env.NO_COLOR
   })
@@ -112,9 +101,7 @@ describe("Highlighter", () => {
       showLineNumbers: false,
     })
 
-    expect(result).toContain("\x1b[38;2;224;108;117mh1\x1b[0m")    // HTML tag
-    expect(result).toContain("\x1b[38;2;190;80;70m<%=\x1b[0m")     // ERB start
-    expect(result).toContain("\x1b[38;2;171;178;191mTitle\x1b[0m") // Text content
+    expect(result).toMatchSnapshot()
   })
 
   test("should handle all Ruby keywords correctly", () => {
@@ -154,16 +141,13 @@ describe("Highlighter", () => {
       "not",
     ]
 
-    for (const keyword of keywords) {
-      const input = `<% ${keyword} %>`
-      const result = highlighter.highlight("test.erb", input, {
+    const highlighted = keywords.map((keyword) =>
+      highlighter.highlight("test.erb", `<% ${keyword} %>`, {
         showLineNumbers: false,
-      })
+      }),
+    )
 
-      // Each keyword should be properly colored without corruption
-      expect(result).toContain(`\x1b[38;2;198;120;221m${keyword}\x1b[0m`)
-      expect(result).not.toContain("[38;2;209;154;102m38") // No corruption
-    }
+    expect(highlighted).toMatchSnapshot()
   })
 
   describe("highlightFile method", () => {
@@ -191,9 +175,7 @@ describe("Highlighter", () => {
     test("should highlight a file", () => {
       const result = highlighter.highlightFileFromPath(testFile)
 
-      expect(result).toContain("\x1b[38;2;224;108;117m<\x1b[0m")  // HTML tags
-      expect(result).toContain("\x1b[38;2;198;120;221mif\x1b[0m") // Ruby keywords
-      expect(result).toContain("\x1b[38;2;190;80;70m<%\x1b[0m")   // ERB tags
+      expect(result.replaceAll(__dirname, "<test-dir>")).toMatchSnapshot()
     })
 
     test("should throw error for non-existent file", () => {
@@ -232,29 +214,26 @@ describe("Standalone utility functions", () => {
     const content = `<% def hello %><span>Hi</span><% end %>`
     const result = await highlightContent(content)
 
-    expect(result).toContain("\x1b[38;2;198;120;221mdef\x1b[0m")  // Ruby keyword
-    expect(result).toContain("\x1b[38;2;224;108;117mspan\x1b[0m") // HTML tag
+    expect(result).toMatchSnapshot()
   })
 
   test("highlightContent should work with github-light theme", async () => {
     const content = "<% true %>"
     const result = await highlightContent(content, "github-light")
 
-    expect(result).toContain("true") // Should contain the keyword
+    expect(result).toMatchSnapshot()
   })
 
   test("highlightFile should work with default theme", async () => {
     const result = await highlightFile(testFile)
 
-    expect(result).toContain("\x1b[38;2;224;108;117mh1\x1b[0m")     // HTML tag
-    expect(result).toContain("\x1b[38;2;198;120;221munless\x1b[0m") // Ruby keyword
+    expect(result.replaceAll(testFile, "<test-file>")).toMatchSnapshot()
   })
 
   test("highlightFile should work with simple theme", async () => {
     const result = await highlightFile(testFile, "simple")
 
-    expect(result).toContain("h1")     // Should contain the HTML tag
-    expect(result).toContain("unless") // Should contain the Ruby keyword
+    expect(result.replaceAll(testFile, "<test-file>")).toMatchSnapshot()
   })
 
   test("highlightFile should throw error for non-existent file", async () => {
@@ -264,12 +243,14 @@ describe("Standalone utility functions", () => {
   })
 
   test("should support focusLine with contextLines", async () => {
-    const content = `<h1>Title</h1>
-<div class="container">
-  <% if user %>
-    <span>Welcome</span>
-  <% end %>
-</div>`
+    const content = dedent`
+      <h1>Title</h1>
+      <div class="container">
+        <% if user %>
+          <span>Welcome</span>
+        <% end %>
+      </div>
+    `
 
     const highlighter = new Highlighter("onedark")
     await highlighter.initialize()
@@ -279,19 +260,14 @@ describe("Standalone utility functions", () => {
       contextLines: 1,
     })
 
-    expect(result).toContain("  → ")
-    expect(result).toContain("\x1b[1m  3") // Bold line number for focus line
-
-    expect(result).toContain("\x1b[2;") // Dim ANSI code added to existing colors
-
-    const lines = result.split("\n")
-    const lineNumberCount = lines.filter((line) => line.includes("│")).length
-    expect(lineNumberCount).toBe(3) // Lines 2, 3, 4 only
+    expect(result).toMatchSnapshot()
   })
 
   test("should support truncateLines option", async () => {
-    const longLineContent = `<div class="this-is-a-very-long-class-name-that-should-be-truncated-when-the-line-exceeds-maximum-width">Content</div>
-<span>Short line</span>`
+    const longLineContent = dedent`
+      <div class="this-is-a-very-long-class-name-that-should-be-truncated-when-the-line-exceeds-maximum-width">Content</div>
+      <span>Short line</span>
+    `
 
     const highlighter = new Highlighter("onedark")
     await highlighter.initialize()
@@ -302,10 +278,6 @@ describe("Standalone utility functions", () => {
       maxWidth: 60,
     })
 
-    expect(result).toContain("…")
-    expect(result).not.toContain("maximum-width")
-
-    const strippedResult = result.replace(ANSI_REGEX, "")
-    expect(strippedResult).toContain("Short line")
+    expect(result.replace(ANSI_REGEX, "")).toMatchSnapshot()
   })
 })
diff --git a/javascript/packages/highlighter/test/inline-diagnostic-renderer.test.ts b/javascript/packages/highlighter/test/inline-diagnostic-renderer.test.ts
new file mode 100644
index 000000000..f59b88c13
--- /dev/null
+++ b/javascript/packages/highlighter/test/inline-diagnostic-renderer.test.ts
@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import dedent from "dedent"
+
+import { themes } from "../src/themes.js"
+import { stripAnsiColors } from "./util.js"
+
+import { InlineDiagnosticRenderer } from "../src/inline-diagnostic-renderer.js"
+import { SyntaxRenderer } from "../src/syntax-renderer.js"
+
+import type { Diagnostic } from "@herb-tools/core"
+
+describe("InlineDiagnosticRenderer", () => {
+  let renderer: InlineDiagnosticRenderer
+
+  beforeEach(async () => {
+    const syntaxRenderer = new SyntaxRenderer(themes.onedark)
+    await syntaxRenderer.initialize()
+    renderer = new InlineDiagnosticRenderer(syntaxRenderer)
+  })
+
+  const createDiagnostic = (overrides: Partial<Diagnostic> = {}): Diagnostic => ({
+    message: "Test error message",
+    severity: "error",
+    location: {
+      start: { line: 2, column: 5 },
+      end: { line: 2, column: 10 },
+    },
+    code: "test-rule",
+    ...overrides,
+  })
+
+  const render = (content: string, diagnostics: Diagnostic[], showLineNumbers = true) => {
+    return stripAnsiColors(renderer.render("/test/file.erb", content, diagnostics, 2, showLineNumbers, false))
+  }
+
+  it("renders a single-line diagnostic with its message under the marker", () => {
+    const content = dedent`
+      line 1
+      line <error> content
+      line 3
+    `
+
+    expect(render(content, [createDiagnostic()])).toMatchSnapshot()
+  })
+
+  it("marks every line a multi-line diagnostic spans", () => {
+    const content = dedent`
+      <div id="gems">
+        <% @gems.each do |topic_gem| %>
+          <%= render partial: "gem_card" %>
+        <% end %>
+      </div>
+    `
+
+    const diagnostic = createDiagnostic({
+      message: "Multi-line offense",
+      severity: "warning",
+      code: "multi-line-rule",
+      location: {
+        start: { line: 2, column: 2 },
+        end: { line: 4, column: 11 },
+      },
+    })
+
+    expect(render(content, [diagnostic])).toMatchSnapshot()
+  })
+
+  it("renders the message once, under the last line of a multi-line diagnostic", () => {
+    const content = dedent`
+      <% if true %>
+        <span>content</span>
+      <% end %>
+    `
+
+    const diagnostic = createDiagnostic({
+      message: "Multi-line offense",
+      location: {
+        start: { line: 1, column: 0 },
+        end: { line: 3, column: 9 },
+      },
+    })
+
+    const result = render(content, [diagnostic])
+
+    expect(result.match(/Multi-line offense/g)).toHaveLength(1)
+    expect(result).toMatchSnapshot()
+  })
+
+  it("renders markers without line numbers", () => {
+    const content = dedent`
+      line 1
+      line <error> content
+      line 3
+    `
+
+    expect(render(content, [createDiagnostic()], false)).toMatchSnapshot()
+  })
+})
diff --git a/javascript/packages/highlighter/test/integration.test.ts b/javascript/packages/highlighter/test/integration.test.ts
index 91869470f..ae099d8ca 100644
--- a/javascript/packages/highlighter/test/integration.test.ts
+++ b/javascript/packages/highlighter/test/integration.test.ts
@@ -6,6 +6,7 @@ import { join } from "path"
 
 describe("herb-highlight CLI", () => {
   const testFile = join(__dirname, "test-template.html.erb")
+  const normalize = (output: string) => output.replaceAll(testFile, "<test-file>")
 
   beforeAll(async () => {
     await Herb.load()
@@ -34,13 +35,7 @@ describe("herb-highlight CLI", () => {
       cwd: process.cwd(),
     })
 
-    // Should contain ANSI color codes
-    expect(result).toContain("\x1b[38;2;224;108;117m<\x1b[0m") // HTML tags
-    expect(result).toContain("\x1b[38;2;198;120;221mif\x1b[0m") // Ruby keywords
-    expect(result).toContain("\x1b[38;2;190;80;70m<%\x1b[0m") // ERB tags
-
-    // Should not contain corrupted ANSI codes
-    expect(result).not.toContain("[38;2;209;154;102m38")
+    expect(normalize(result)).toMatchSnapshot()
   })
 
   test("should handle non-existent file gracefully", () => {
@@ -61,8 +56,8 @@ describe("herb-highlight CLI", () => {
       },
     )
 
-    // Should not contain ANSI color codes when NO_COLOR is set
     expect(result).not.toContain("\x1b[")
+    expect(normalize(result)).toMatchSnapshot()
   })
 
   test("should support --focus option", () => {
@@ -71,15 +66,7 @@ describe("herb-highlight CLI", () => {
       cwd: process.cwd(),
     })
 
-    // Should contain focus line indicator
-    expect(result).toContain("  → ")
-    // Should contain file path header
-    expect(result).toContain(testFile)
-    // Should contain dimmed context lines
-    expect(result).toContain("\x1b[2;")
-    // Should not show all lines (only focus + context)
-    const lines = result.split("\n").filter((line) => line.includes("│"))
-    expect(lines.length).toBeLessThanOrEqual(5) // focus + 2 context each side
+    expect(normalize(result)).toMatchSnapshot()
   })
 
   test("should support --context-lines option", () => {
@@ -91,9 +78,7 @@ describe("herb-highlight CLI", () => {
       },
     )
 
-    // Should show fewer context lines
-    const lines = result.split("\n").filter((line) => line.includes("│"))
-    expect(lines.length).toBeLessThanOrEqual(3) // focus + 1 context each side
+    expect(normalize(result)).toMatchSnapshot()
   })
 
   test("should handle invalid --focus value", () => {
diff --git a/javascript/packages/highlighter/test/syntax-renderer.test.ts b/javascript/packages/highlighter/test/syntax-renderer.test.ts
index 30a2ac045..ee432bbf3 100644
--- a/javascript/packages/highlighter/test/syntax-renderer.test.ts
+++ b/javascript/packages/highlighter/test/syntax-renderer.test.ts
@@ -6,10 +6,6 @@ import { Herb } from "@herb-tools/node-wasm"
 import { SyntaxRenderer } from "../src/syntax-renderer.js"
 import { ANSI_REGEX } from "../src/color.js"
 
-function stripAnsiColors(text: string): string {
-  return text.replace(ANSI_REGEX, '')
-}
-
 describe("SyntaxRenderer", () => {
   let renderer: SyntaxRenderer
 
@@ -76,8 +72,8 @@ describe("SyntaxRenderer", () => {
     it("should highlight simple HTML", () => {
       const content = "<div>hello</div>"
       const result = renderer.highlight(content)
-      expect(result).toContain("div")
-      expect(result).toContain("hello")
+
+      expect(result).toMatchSnapshot()
     })
 
     it("should handle empty content", () => {
@@ -112,7 +108,8 @@ describe("SyntaxRenderer", () => {
 
       const content = "<div>test</div>"
       const result = githubLightRenderer.highlight(content)
-      expect(result).toContain("div")
+
+      expect(result).toMatchSnapshot()
     })
 
     it("should work with simple theme", async () => {
@@ -121,7 +118,8 @@ describe("SyntaxRenderer", () => {
 
       const content = "<div>test</div>"
       const result = simpleRenderer.highlight(content)
-      expect(result).toContain("div")
+
+      expect(result).toMatchSnapshot()
     })
   })
 
@@ -138,6 +136,7 @@ describe("SyntaxRenderer", () => {
         const result = noColorRenderer.highlight(content)
 
         expect(result).not.toMatch(ANSI_REGEX)
+        expect(result).toMatchSnapshot()
       } finally {
         if (originalNoColor === undefined) {
           delete process.env.NO_COLOR
@@ -168,8 +167,8 @@ describe("SyntaxRenderer", () => {
 
       const content = "<% if true %>"
       const result = erbRenderer.highlight(content)
-      expect(result).toContain("if")
-      expect(result).toContain("true")
+
+      expect(result).toMatchSnapshot()
     })
   })
 
@@ -196,7 +195,8 @@ describe("SyntaxRenderer", () => {
 
       const content = "<!-- comment -->"
       const result = commentRenderer.highlight(content)
-      expect(stripAnsiColors(result)).toContain("comment")
+
+      expect(result).toMatchSnapshot()
     })
 
     it("should preserve ERB highlighting in comments", async () => {
@@ -223,9 +223,8 @@ describe("SyntaxRenderer", () => {
 
       const content = "<!-- <% code %> -->"
       const result = erbCommentRenderer.highlight(content)
-      expect(result).toMatchInlineSnapshot(
-        `"<!-- <% code %> -->"`,
-      )
+
+      expect(result).toMatchSnapshot()
     })
   })
 })