fix: resolve hero code demo syntax highlighting issue

[HimasreeKolathur24]

Summary

Fixed a rendering issue in the Hero Code Demo where Tailwind utility classes were displayed as visible text inside the code block.

Changes Made

• Replaced HTML-string based syntax highlighting with React element rendering.
• Removed the use of dangerouslySetInnerHTML.
• Preserved syntax highlighting for keywords, strings, comments, and identifiers.
• Improved code readability and maintainability.

Type of change

• Bug fix
• New feature
• Refactor
• Documentation
• Test or CI improvement
• Starter template change

Related issue

Closes #485

Validation

• Manual verification

List any additional manual verification you performed:

• Verified the Hero Code Demo renders correctly.
• Confirmed Tailwind utility classes no longer appear in the UI.
• Verified syntax highlighting for keywords, strings, and comments.
• Tested the homepage after rebuilding.

Screenshots or recordings

#Before

#After Fix

Checklist

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

Summary by CodeRabbit

• Refactor
  • Reworked code syntax highlighting to render highlighted tokens directly for more reliable, accurate display.
  • Improved handling of comment lines and more precise tokenization of whitespace vs. non-whitespace segments.
• Bug Fixes
  • Fixed highlighting behavior that previously relied on replacement-style rendering.
• Documentation
  • Updated the displayed AI model in the Hero code demo snippet.

[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 →

[github-actions]

👋 Thanks for opening a PR, @HimasreeKolathur24!

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.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fc4db3da-4289-48e4-b40a-d98dc40051fb

📥 Commits

Reviewing files that changed from the base of the PR and between 9432190 and a2744c2.

📒 Files selected for processing (1)

• modules/home/hero-code.tsx

✅ Files skipped from review due to trivial changes (1)

• modules/home/hero-code.tsx

---

Walkthrough

The CodeLine component replaces unsafe HTML injection with direct JSX tokenization. Code lines are split by whitespace, then tokens are checked against keyword/string/identifier patterns and wrapped in styled spans, eliminating React state and effects. The hero code demo snippet is updated to reference deepseek-chat as the displayed AI model.

Changes

Hero Code Demo Syntax Highlighting Fix

Layer / File(s)	Summary
CodeLine component refactoring: dangerouslySetInnerHTML to tokenization modules/home/code-line.tsx	Removes dangerouslySetInnerHTML, regex string substitutions, and React state/effect hooks. Implements direct tokenization via line.split(/(\s+)/) with conditional JSX wrapping for keywords, quoted strings, and identifiers (Editron, editor, console). Adds early return for lines starting with // comments.
Hero code demo model reference update modules/home/hero-code.tsx	The codeSnippet string is updated to display deepseek-chat instead of claude-3-opus as the AI model value in the demo.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

ui-ux, area: ui, enhancement

Poem

🐰 A token splits the line with care,
No HTML string floating bare,
Keywords sparkle, strings now glow,
JSX spans steal the show,
Safety wins where regexy'd go! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	The change to 'deepseek-chat' in the hardcoded code snippet appears to be a minor model update within the same component context, though not explicitly mentioned in the PR description or issue objectives.	Clarify whether the model change from 'claude-3-opus' to 'deepseek-chat' is intentional and scoped to this PR, or if it should be addressed separately.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: resolve hero code demo syntax highlighting issue' accurately and concisely summarizes the main bug fix where Tailwind classes were being displayed as visible text in the code demo.
Description check	✅ Passed	The PR description comprehensively covers the summary of changes, type of change, related issue, validation steps, and visual evidence with before/after screenshots, following the repository template structure.
Linked Issues check	✅ Passed	The PR successfully addresses all requirements from issue #485: replaced HTML-string syntax highlighting with React element rendering, removed dangerouslySetInnerHTML, preserved syntax highlighting for keywords/strings/comments, and verified Tailwind classes no longer appear as visible text.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@modules/home/code-line.tsx`:
- Around line 22-55: The current tokenization uses line.split(/(\s+)/) which
keeps punctuation attached (e.g., "Editron({", "editor.launch();",
"'`@editron/core`';") so KEYWORDS, string checks and the special identifier check
(["Editron","editor","console"]) miss matches; update tokenization in the parts
creation (replace the line.split call) to use a regex that separately captures
quoted strings, identifiers, and punctuation OR normalize each part before
matching (trim surrounding punctuation like (){};.,) so comparisons against
KEYWORDS, the string-start/end checks, and the identifier list succeed; ensure
this change is applied where parts is defined and that parts.map logic (the
KEYWORDS check, the string literal check, and the ["Editron","editor","console"]
check) uses the normalized token for comparisons while still rendering the
original part so spacing/punctuation is preserved.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e1f74d2a-34ae-4142-86f1-488eddea8d72

📥 Commits

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

📒 Files selected for processing (1)

• modules/home/code-line.tsx

[piyushdotcomm]

Can you remove the claude opus 3 model as we don't offer that
Better to add any free model such as deepseak or kwen

[HimasreeKolathur24]

Can you remove the claude opus 3 model as we don't offer that Better to add any free model such as deepseak or kwen

@piyushdotcomm,
Updated the demo model to deepseek-chat and pushed the changes.
Thankyou.