Function renderCodeDiff

scripts/static/js/sidebar.js:321–360

(aCode, bCode)

        // Helper to render tab content
        // Simple line-level LCS diff renderer between two code strings
        function renderCodeDiff(aCode, bCode) {
            const a = (aCode || '').split('\n');
            const b = (bCode || '').split('\n');
            const m = a.length, n = b.length;
            // build LCS table
            const dp = Array.from({length: m+1}, () => new Array(n+1).fill(0));
            for (let ii = m-1; ii >= 0; --ii) {
                for (let jj = n-1; jj >= 0; --jj) {
                    if (a[ii] === b[jj]) dp[ii][jj] = dp[ii+1][jj+1] + 1;
                    else dp[ii][jj] = Math.max(dp[ii+1][jj], dp[ii][jj+1]);
                }
            }
            // backtrack
            let i = 0, j = 0;
            const parts = [];
            while (i < m && j < n) {
                if (a[i] === b[j]) {
                    parts.push({type: 'eq', line: a[i]});
                    i++; j++; 
                } else if (dp[i+1][j] >= dp[i][j+1]) {
                    parts.push({type: 'del', line: a[i]});
                    i++;
                } else {
                    parts.push({type: 'ins', line: b[j]});
                    j++;
                }
            }
            while (i < m) { parts.push({type: 'del', line: a[i++]}); }
            while (j < n) { parts.push({type: 'ins', line: b[j++]}); }

            // Render HTML with inline styles
            const htmlLines = parts.map(function(p) {
                if (p.type === 'eq') return '<div style="white-space:pre-wrap;">' + escapeHtml(p.line) + '</div>';
                if (p.type === 'del') return '<div style="background:#fff0f0;color:#8b1a1a;padding:0.08em 0.3em;border-left:3px solid #f26;white-space:pre-wrap;">- ' + escapeHtml(p.line) + '</div>';
                return '<div style="background:#f2fff2;color:#116611;padding:0.08em 0.3em;border-left:3px solid #2a8;white-space:pre-wrap;">+ ' + escapeHtml(p.line) + '</div>';
            });
            return '<div style="font-family: \'Fira Mono\', monospace; font-size:0.95em; line-height:1.35;">' +
                '<div style="margin-bottom:0.4em;color:#666;">Showing diff between program and its parent (parent id: ' + (parentNodeForDiff ? parentNodeForDiff.id : 'N/A') + ')</div>' +
                htmlLines.join('') + '</div>';
        }

        // small helper to escape HTML
        function escapeHtml(s) {