Fix syntax highlighting for React/TypeScript files by adding language detection

[Copilot]

Previously, the SyntaxHighlight component was hardcoded to use language="javascript" regardless of the actual file type, causing React/TypeScript files to be displayed with incorrect syntax highlighting.

Problem

As shown in the issue, a .tsx file was being highlighted as JavaScript instead of TypeScript:

The React/TypeScript code lacked proper syntax highlighting for:

• TypeScript keywords and types
• JSX elements and attributes
• JSX expressions and syntax

Solution

Added automatic language detection based on file extension:

1. Created getLanguageFromPath.ts - A utility function that maps file extensions to syntax highlighting languages
2. Updated SyntaxHighlight component - Added optional language prop with JavaScript as fallback
3. Modified GithubPermalinkBase component - Uses language detection to pass the correct language to syntax highlighter

Supported Languages

The language detection now supports:

• TypeScript/React: .ts, .tsx → typescript
• JavaScript/React: .js, .jsx → javascript
• Other languages: Python, Go, Java, C++, CSS, HTML, JSON, YAML, and more

After Fix

The React/TypeScript code now displays with proper syntax highlighting:

• ✅ TypeScript keywords like export, function, const
• ✅ JSX elements like <div>, <button>
• ✅ JSX attributes like className
• ✅ TypeScript types like React.PropsWithChildren
• ✅ JSX expressions like {value}

Testing

• Added comprehensive tests for language detection (16 test cases)
• All existing tests continue to pass
• Added new Storybook story demonstrating the fix
• Maintains backward compatibility with JavaScript fallback

Fixes #53.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/react-github-permalink/react-github-permalink/node_modules/.bin/storybook build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f412338

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for react-github-permalink ready!

Name	Link
🔨 Latest commit	f412338
🔍 Latest deploy log	https://app.netlify.com/projects/react-github-permalink/deploys/68d5f2561a2a50000899258c
😎 Deploy Preview	https://deploy-preview-66--react-github-permalink.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.