Make TSX and JSX files render in the right language.

.changeset/green-rice-exist.md

@@ -0,0 +1,5 @@
+---
+"react-github-permalink": patch
+---
+
+Make JSX and TSX be detected specifically as JSX and TSX languages. 

src/library/GithubPermalink/GithubPermalink.stories.tsx

@@ -37,6 +37,10 @@ export const DifferentLanguages: Story = {
     <p>TSX</p>
     <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/242681a9df549adcc9a7fca0d8421d98b7e312c4/sample_files/sample1.tsx#L1-L11" />
 
+    <p>TSX2</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-renders/blob/b91494bff90774073c10ba7a2a362d37c8d083ef/src/react-renders/ReactRenders3.tsx#L8-L32" />
+
+
     <p>Docker file</p>
     <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.dockerfile#L1-L20" />
 

src/library/SyntaxHighlight/SyntaxHighlight.tsx

@@ -144,6 +144,6 @@ export function SyntaxHighlight(props: {
     }, [])
 
 
-    return <SyntaxHighlighter className={className} style={ready ? isDarkMode ? oneDark : oneLight : {}} language={language} showLineNumbers={startingLineNumber !== undefined} startingLineNumber={startingLineNumber}>{text}</SyntaxHighlighter>
+    return <><SyntaxHighlighter className={className} style={ready ? isDarkMode ? oneDark : oneLight : {}} language={language} showLineNumbers={startingLineNumber !== undefined} startingLineNumber={startingLineNumber}>{text}</SyntaxHighlighter></>
 
 }

src/library/utils/getLanguageFromPath.test.ts

@@ -2,8 +2,8 @@ import { describe, it, expect } from 'vitest';
 import { getLanguageFromPath } from './getLanguageFromPath';
 
 describe('getLanguageFromPath', () => {
-    it('should return typescript for .tsx files', () => {
-        expect(getLanguageFromPath('ReactRenders3.tsx')).toBe('typescript');
+    it('should return tsx for .tsx files', () => {
+        expect(getLanguageFromPath('ReactRenders3.tsx')).toBe('tsx');
     });
 
     it('should return typescript for .ts files', () => {
@@ -14,8 +14,8 @@ describe('getLanguageFromPath', () => {
         expect(getLanguageFromPath('script.js')).toBe('javascript');
     });
 
-    it('should return javascript for .jsx files', () => {
-        expect(getLanguageFromPath('component.jsx')).toBe('javascript');
+    it('should return jsx for .jsx files', () => {
+        expect(getLanguageFromPath('component.jsx')).toBe('jsx');
     });
 
     it('should return python for .py files', () => {
@@ -59,11 +59,11 @@ describe('getLanguageFromPath', () => {
     });
 
     it('should handle paths with multiple dots', () => {
-        expect(getLanguageFromPath('src/components/MyComponent.tsx')).toBe('typescript');
+        expect(getLanguageFromPath('src/components/MyComponent.tsx')).toBe('tsx');
     });
 
     it('should handle case insensitive extensions', () => {
-        expect(getLanguageFromPath('Component.TSX')).toBe('typescript');
+        expect(getLanguageFromPath('Component.TSX')).toBe('tsx');
         expect(getLanguageFromPath('Script.JS')).toBe('javascript');
     });
 });

src/library/utils/getLanguageFromPath.ts

@@ -8,13 +8,15 @@ export function getLanguageFromPath(filePath: string): AvailableLanguagesPrism {
 
     switch (extension) {
         case 'js':
-        case 'jsx':
         case 'mjs':
         case 'cjs':
             return 'javascript';
+        case 'jsx':
+            return 'jsx';
         case 'ts':
-        case 'tsx':
             return 'typescript';
+        case 'tsx':
+            return 'tsx';
         case 'py':
         case 'python':
             return 'python';