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

sample_files/sample1.tsx

@@ -0,0 +1,11 @@
+function Foo(props: { name: string }) {
+    return <div>{props.name}</div>
+
+}
+
+export function Demo() {
+    return <div>
+        <Foo name="bar" />
+        Hello world!
+    </div>
+}   

src/library/GithubPermalink/GithubPermalink.stories.tsx

@@ -23,6 +23,23 @@ export const Primary: Story = {
   ),
 };
 
+export const DifferentLanguages: Story = {
+  render: () => (<div>
+    <p>Go</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5" />
+
+    <p>JavaScript</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bc75e8fe2d1c0395c9443afe1837f453c05a7698/sample_files/sample1.js#L3-L17" />
+
+    <p>SQL</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bc75e8fe2d1c0395c9443afe1837f453c05a7698/sample_files/sample1.sql#L11-L21" />
+
+    <p>TSX</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/242681a9df549adcc9a7fca0d8421d98b7e312c4/sample_files/sample1.tsx#L1-L11" />
+  </div>
+  ),
+};
+
 export const WithBackground: Story = {
   render: () => (
     <div style={{ backgroundColor: "pink", padding: "1em" }}>

src/library/GithubPermalink/GithubPermalinkBase.tsx

@@ -41,11 +41,11 @@ export function GithubPermalinkBase(props: GithubPermalinkBaseProps) {
 
             {formatedLineExclusions.map((v) => {
                 if (v.isExclude) {
-                    return <SyntaxHighlight className="hide-line-numbers" text={excludeText} startingLineNumber={v.from} key={v.from}/>
+                    return <SyntaxHighlight className="hide-line-numbers" text={excludeText} startingLineNumber={v.from} key={v.from} />
 
                 }
 
-                return <SyntaxHighlight text={v.lines.join("\n")} startingLineNumber={v.from} key={v.from}/>
+                return <SyntaxHighlight text={v.lines.join("\n")} startingLineNumber={v.from} key={v.from} />
 
             })}
 

src/library/SyntaxHighlight/SyntaxHighlight.tsx

@@ -125,7 +125,8 @@ const noTheme = {
 export function SyntaxHighlight(props: {
     text: string;
     startingLineNumber?: number;
-    className?: string; 
+    className?: string;
+    language?: string;
 }) {
 
     const { startingLineNumber, text, className } = props;
@@ -141,6 +142,6 @@ export function SyntaxHighlight(props: {
     }, [])
 
 
-    return <ReactSyntaxHighlighter className={className} style={ready ? isDarkMode ? tomorrowNight : github : noTheme} language="javascript" showLineNumbers={startingLineNumber !== undefined} startingLineNumber={startingLineNumber}>{text}</ReactSyntaxHighlighter>
+    return <ReactSyntaxHighlighter className={className} style={ready ? isDarkMode ? tomorrowNight : github : noTheme} showLineNumbers={startingLineNumber !== undefined} startingLineNumber={startingLineNumber}>{text}</ReactSyntaxHighlighter>
 
 }