From f8d5f42ed7267c94ac85ad4af1070bd22309b74a Mon Sep 17 00:00:00 2001 From: anshul23102 Date: Tue, 2 Jun 2026 22:48:07 +0530 Subject: [PATCH] fix(script): define renderCodeWithLineNumbers to resolve ReferenceError on detail pages The code viewer panel called renderCodeWithLineNumbers(data.code) at line 763 of script.js, but this function was never defined anywhere in the codebase. Every click on the View Code or View Code (mobile) button produced a ReferenceError in the browser console and the code panel rendered empty. Add renderCodeWithLineNumbers(code) adjacent to fetchStarterCode. It splits the code string into lines and returns an array of DOM row elements, each containing a line-number gutter cell and a content cell. Using document.createElement and textContent instead of innerHTML ensures the code content is never parsed as markup. Closes #406 --- static/script.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/static/script.js b/static/script.js index 7366707..08075e0 100644 --- a/static/script.js +++ b/static/script.js @@ -965,6 +965,30 @@ if (isIndexPage) { document.body.style.overflow = ""; } + // Render code string as a list of DOM rows where each row contains a + // line-number gutter cell and a code cell. Returning DOM nodes instead + // of an HTML string avoids innerHTML XSS risks from the code content. + function renderCodeWithLineNumbers(code) { + var lines = (code || "").split("\n"); + return lines.map(function (line, index) { + var row = document.createElement("div"); + row.className = "code-line"; + + var lineNum = document.createElement("span"); + lineNum.className = "code-line-number"; + lineNum.setAttribute("aria-hidden", "true"); + lineNum.textContent = index + 1; + + var lineCode = document.createElement("span"); + lineCode.className = "code-line-content"; + lineCode.textContent = line; + + row.appendChild(lineNum); + row.appendChild(lineCode); + return row; + }); + } + //fetches the starter code from the server via an API call //inserts the code into the panel and handles loading/error states function fetchStarterCode() {