PolicyEngine / PolicyEngine/policyengine-app-v2
Replace react-syntax-highlighter with Prism.js after Tailwind migration
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 1
- Forks
- 3
- Avg merge
- 1d 50m
- Merged PRs (30d)
- 39
Description
Summary
Replace react-syntax-highlighter with prismjs for code syntax highlighting.
Context
As the Tailwind migration progresses and design tokens move from JS objects (colors.primary[500]) to CSS custom properties (var(--color-primary-500)), Prism becomes the better fit:
- Prism themes are CSS classes that naturally reference CSS custom properties / design tokens
- react-syntax-highlighter themes are JS inline styles that can't reference CSS variables without extra plumbing
- Bundle size: Prism is ~6KB vs ~40KB for react-syntax-highlighter
- Precedent: pe-taxsim dashboard already uses Prism with Tailwind + CSS tokens successfully
Blocked by
Tailwind migration completing (design tokens moved to CSS custom properties).
Changes
- Remove
react-syntax-highlighterand@types/react-syntax-highlighterdependencies - Install
prismjs - Replace
<SyntaxHighlighter>component usage with Prism'shighlight()+ CSS theme - Define Prism token colors using design token CSS variables in the global stylesheet
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
First verify that the Tailwind migration and design-token move are complete, then locate all SyntaxHighlighter usages, the dependency manifests, and the global stylesheet. Replace the component integration and define Prism token colors with CSS custom properties; done when react-syntax-highlighter and its types are removed, Prism is installed, and highlighting works with the migrated tokens.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100