fix(home): escape HTML entities in CodeLine before injecting highlight spans

[nyxsky404]

Summary

• Added an escapeHtml() helper inside CodeLine that converts & → &, < → <, and > → > before the keyword/string replacement regexes run
• highlightCode() now calls escapeHtml(code) first, then performs the span-injection replacements on the safe string
• Single and double quotes are intentionally left unescaped — the string-literal highlight patterns (/'[^']*'/g and /"[^"]*"/g) depend on them being literal characters in the input

Type of change

• Bug fix

Related issue

Closes #462

Validation

• npm run lint
• npm test
• npm run build

Additional manual verification:

• Added lines with TypeScript generics (Array<string>), comparison operators (a < b), and JSX (<div>hello</div>) to codeSnippet in hero-code.tsx locally — all now render as readable escaped text instead of corrupted/invisible DOM nodes
• Confirmed existing highlighted output (keywords in red, string literals in amber) is visually unchanged for the current demo snippet
• Confirmed & in source code (e.g. &&) now correctly renders as & in the browser, not a broken entity

Pre-existing useAI.test.ts failure is unrelated to this change (reproducible on unmodified main).

Screenshots or recordings

Before — Array<string> renders as Array with <string> disappearing into the DOM:

const elements: Array<string> = [];
→ browser renders: const elements: Array = []; (the generic type is lost)

After — same line renders correctly as readable text with keyword highlighting intact.

Checklist

• I kept this PR focused on one primary change
• I updated documentation if behavior changed
• I did not commit secrets, local logs, or scratch files
• I am requesting review on the correct scope

---

Root cause: highlightCode() performed string replacements that inject <span> tags, then passed the result directly to dangerouslySetInnerHTML. Because HTML special characters in the source text were never escaped, any <, >, or & in the input would be interpreted as raw HTML by the browser — silently dropping content or breaking layout. The fix escapes those three characters first, so the injected spans are still valid HTML while the code content renders as literal text. The component's existing TODO comment (// Note: This is a very simplistic implementation and should be replaced with a proper library) remains valid for a future deeper refactor; this PR addresses the correctness bug without a dependency change.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[coderabbitai]

Warning

Review limit reached

@nyxsky404, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 21 minutes and 15 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 71b7d96c-3a8c-43bb-b128-d6023bbc8917

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and f1fb46e.

📒 Files selected for processing (1)

• modules/home/code-line.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

👋 Thanks for opening a PR, @nyxsky404!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[nyxsky404]

@piyushdotcomm Could you please review it when you get a chance?