🐛 Describe the bug
The Hero Code Demo on the homepage displays Tailwind utility classes as visible text inside the code snippet. Instead of rendering proper syntax highlighting, class names such as:
text-red-500 dark:text-red-400 font-semibold
are shown directly in the UI, affecting readability and making the demo appear broken.
🔁 Steps to Reproduce
- Open the Editron homepage.
- Navigate to the Hero Code Demo section.
- Observe the code snippet displayed in the editor preview.
- Notice that Tailwind utility classes appear as visible text within the code block.
✅ Expected Behavior
The Hero Code Demo should render syntax-highlighted code correctly without displaying internal Tailwind utility classes.
❌ Actual Behavior
Tailwind utility classes are rendered as visible text inside the code snippet, resulting in broken syntax highlighting and a poor user experience.
📸 Screenshots
Before Fix:
After Fix:
🌱 Contributor Checklist
💻 Environment
- Browser: Chrome
- Device: Desktop
- OS: Windows
📝 Additional Context
The issue originates from the custom syntax-highlighting implementation used in the Hero Code Demo component. The current implementation relies on HTML-string generation and rendering, which causes styling class names to leak into the displayed code. Replacing this approach with React element rendering resolves the issue while preserving syntax highlighting.
🐛 Describe the bug
The Hero Code Demo on the homepage displays Tailwind utility classes as visible text inside the code snippet. Instead of rendering proper syntax highlighting, class names such as:
text-red-500 dark:text-red-400 font-semiboldare shown directly in the UI, affecting readability and making the demo appear broken.
🔁 Steps to Reproduce
✅ Expected Behavior
The Hero Code Demo should render syntax-highlighted code correctly without displaying internal Tailwind utility classes.
❌ Actual Behavior
Tailwind utility classes are rendered as visible text inside the code snippet, resulting in broken syntax highlighting and a poor user experience.
📸 Screenshots
Before Fix:
After Fix:
🌱 Contributor Checklist
💻 Environment
📝 Additional Context
The issue originates from the custom syntax-highlighting implementation used in the Hero Code Demo component. The current implementation relies on HTML-string generation and rendering, which causes styling class names to leak into the displayed code. Replacing this approach with React element rendering resolves the issue while preserving syntax highlighting.