PolicyEngine / PolicyEngine/policyengine-app-v2

Replace react-syntax-highlighter with Prism.js after Tailwind migration

Open
#773 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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-highlighter and @types/react-syntax-highlighter dependencies
  • Install prismjs
  • Replace <SyntaxHighlighter> component usage with Prism's highlight() + CSS theme
  • Define Prism token colors using design token CSS variables in the global stylesheet

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.