fix: resolve hero code demo syntax highlighting issue#486
fix: resolve hero code demo syntax highlighting issue#486HimasreeKolathur24 wants to merge 1 commit into
Conversation
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
👋 Thanks for opening a PR, @HimasreeKolathur24!Your PR has entered the 🚦 PR Review Pipeline.
What happens next
A pipeline status comment will appear below and update automatically as your PR progresses. While you wait
This comment is posted only once. |
WalkthroughThe ChangesSyntax Highlighting Refactor
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
📒 Files selected for processing (1)
modules/home/code-line.tsx
| const parts = line.split(/(\s+)/); | ||
|
|
||
| return ( | ||
| <> | ||
| {parts.map((part, index) => { | ||
| if (KEYWORDS.includes(part)) { | ||
| return ( | ||
| <span | ||
| key={index} | ||
| className="text-red-500 dark:text-red-400 font-semibold" | ||
| > | ||
| {part} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| return <span dangerouslySetInnerHTML={{ __html: highlightCode(highlighted) }} />; | ||
| }; | ||
|
|
||
| const highlightCode = (code: string) => { | ||
| return code | ||
| .replace(/import|from|export|default|return|const|new/g, '<span class="text-red-500 dark:text-red-400 font-semibold">$&</span>') | ||
| .replace(/'[^']*'/g, '<span class="text-amber-600 dark:text-amber-400">$&</span>') | ||
| .replace(/"[^"]*"/g, '<span class="text-amber-600 dark:text-amber-400">$&</span>') | ||
| .replace(/Editron|console|editor/g, '<span class="text-rose-600 dark:text-rose-400">$&</span>'); | ||
| } | ||
|
|
||
| const [highlighted, setHighlighted] = React.useState<React.ReactNode>(line); | ||
| if ( | ||
| (part.startsWith("'") && part.endsWith("'")) || | ||
| (part.startsWith('"') && part.endsWith('"')) | ||
| ) { | ||
| return ( | ||
| <span key={index} className="text-amber-600 dark:text-amber-400"> | ||
| {part} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| React.useEffect(() => { | ||
| setHighlighted(highlight(line)); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [line]); | ||
| if (["Editron", "editor", "console"].includes(part)) { | ||
| return ( | ||
| <span key={index} className="text-rose-600 dark:text-rose-400"> | ||
| {part} | ||
| </span> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Tokenization currently breaks highlighting for real snippet tokens.
On Line 22, splitting by whitespace causes punctuation-attached tokens (Editron({, editor.launch();, '@editron/core';) and multi-word strings ("Ready to build something amazing.") to miss the checks on Lines 38-55. This regresses expected syntax highlighting in HeroCodeDemo.
Suggested fix (tokenize strings/identifiers/punctuation before classification)
- const parts = line.split(/(\s+)/);
+ const parts =
+ line.match(
+ /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\s+|[A-Za-z_$][\w$]*|[^\s]/g
+ ) ?? [line];
return (
<>
{parts.map((part, index) => {
if (KEYWORDS.includes(part)) {
@@
- if (
- (part.startsWith("'") && part.endsWith("'")) ||
- (part.startsWith('"') && part.endsWith('"'))
- ) {
+ if (
+ (part.startsWith("'") && part.endsWith("'")) ||
+ (part.startsWith('"') && part.endsWith('"'))
+ ) {
return (
<span key={index} className="text-amber-600 dark:text-amber-400">
{part}
</span>
);
}🤖 Prompt for 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.
In `@modules/home/code-line.tsx` around lines 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.
1 participant
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
dangerouslySetInnerHTML.Type of change
Related issue
Closes #485
Validation
List any additional manual verification you performed:
Screenshots or recordings
#Before
#After Fix
Checklist
Summary by CodeRabbit