dwjohnston · dwjohnston · Oct 6, 2025 · Jul 10, 2025 · Sep 26, 2025 · Sep 26, 2025
diff --git a/.changeset/rare-gifts-sip.md b/.changeset/rare-gifts-sip.md
@@ -0,0 +1,9 @@
+---
+"react-github-permalink": minor
+---
+
+Switch style provider from HLJS to Prism. (Prism supports TSX). 
+
+Auto detect language based on file extension. 
+
+Adds a `language` prop to override  any auto-detection behaviour. 
diff --git a/.env.template b/.env.template
@@ -0,0 +1 @@
+STORYBOOK_GITHUB_TOKEN=${GITHUB_TOKEN_READONLY}
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,8 @@
 .pnp.js
 .yarn/install-state.gz
 
+.env
+
 # testing
 /coverage
 

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,22 @@
+import type { Preview } from "@storybook/react";
+import './global.css';
+import { GithubPermalinkProvider } from "../src/library/config/GithubPermalinkContext";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [(Story) => (
+    <div style={{ margin: '3em' }} >
+      <GithubPermalinkProvider githubToken={process.env.STORYBOOK_GITHUB_TOKEN}>
+        <Story />
+      </GithubPermalinkProvider>
+    </div>)]
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -21,6 +21,15 @@ I highly rate the [`vscode-copy-github-permalink` plugin](https://marketplace.vi
 https://codesandbox.io/s/exciting-nova-js5zlk?file=/src/App.js
 
 
+## Language Support
+
+Langauge is naively auto detected based on file extension. See [logic here for all auto-detected languages](https://github.com/dwjohnston/react-github-permalink/pull/73/files#diff-b6feb43e40d6eae1cba733450d691be8f83a1a50ecbff1b890cd343b2039ece1).
+
+If this does not suit you, you can override the autodetected langauage with the `language` prop. 
+
+
+
+
 ## RSC Compatibility / Three modes of operation
 
 This package is compatible with Next 13+ and the components can be used as RSCs if you wish. 

diff --git a/sample_files/sample.dockerfile b/sample_files/sample.dockerfile
@@ -0,0 +1,20 @@
+# Use an official Node.js runtime as a parent image
+FROM node:18-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose the app port
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]
diff --git a/sample_files/sample.html b/sample_files/sample.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Sample HTML Page</title>
+</head>
+
+<body>
+    <h1>Welcome to the Sample HTML Page</h1>
+    <p>This is a simple HTML file for demonstration purposes.</p>
+    <ul>
+        <li>First item</li>
+        <li>Second item</li>
+        <li>Third item</li>
+    </ul>
+</body>
+
+</html>
diff --git a/sample_files/sample.xml b/sample_files/sample.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<library>
+    <book id="1">
+        <title>Introduction to XML</title>
+        <author>Jane Doe</author>
+        <year>2022</year>
+        <genre>Technology</genre>
+    </book>
+    <book id="2">
+        <title>Learning React</title>
+        <author>John Smith</author>
+        <year>2023</year>
+        <genre>Programming</genre>
+    </book>
+</library>
diff --git a/sample_files/sample1.tsx b/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>
+}   
diff --git a/src/library/GithubPermalink/GithubPermalink.stories.tsx b/src/library/GithubPermalink/GithubPermalink.stories.tsx
@@ -23,6 +23,33 @@ 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" />
+
+    <p>Docker file</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.dockerfile#L1-L20" />
+
+    <p>XML</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.xml#L1-L15" />
+
+    <p>HTML</p>
+    <GithubPermalink permalink="https://github.com/dwjohnston/react-github-permalink/blob/bd98ef231beeb18ed77207216464fc8e454dd721/sample_files/sample.html#L1-L19" />
+
+  </div>
+  ),
+};
+
 export const WithBackground: Story = {
   render: () => (
     <div style={{ backgroundColor: "pink", padding: "1em" }}>

diff --git a/src/library/GithubPermalink/GithubPermalink.tsx b/src/library/GithubPermalink/GithubPermalink.tsx
@@ -1,11 +1,10 @@
 "use client"
 
-import {useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { GithubPermalinkDataResponse, GithubPermalinkContext } from "../config/GithubPermalinkContext";
-import { useMediaQuery } from "react-responsive";
 import { GithubPermalinkBase, GithubPermalinkBaseProps } from "./GithubPermalinkBase";
 
-type GithubPermalinkProps = Omit<GithubPermalinkBaseProps, "data"> & {permalink: string};
+type GithubPermalinkProps = Omit<GithubPermalinkBaseProps, "data"> & { permalink: string };
 export function GithubPermalink(props: GithubPermalinkProps) {
 
   const { permalink } = props;
@@ -28,7 +27,7 @@ export function GithubPermalink(props: GithubPermalinkProps) {
   }
 
 
-  return <GithubPermalinkBase data={data} {...props}/>
+  return <GithubPermalinkBase data={data} {...props} />
 }
 
 
diff --git a/src/library/GithubPermalink/GithubPermalinkBase.tsx b/src/library/GithubPermalink/GithubPermalinkBase.tsx
@@ -4,28 +4,31 @@ import { GithubSvg } from "../GithubSvg/GithubSvg";
 import { PropsWithChildren } from "react";
 import { SyntaxHighlight } from "../SyntaxHighlight/SyntaxHighlight";
 import { formatForLineExclusions } from "./formatLineExclusions";
-import { CopySvg } from "../images/CopySvg";
 import { CopyButton } from "../common/CopyButton/CopyButton";
+import { getLanguageFromPath } from "../utils/getLanguageFromPath";
+import { AvailableLanguagesPrism } from "../SyntaxHighlight/availableLanguagesPrism";
 
 export type GithubPermalinkBaseProps = {
     className?: string;
     permalink: string;
     excludeLines?: Array<[from: number, to: number]>;
     excludeText?: string;
     data: GithubPermalinkDataResponse;
+    language?: AvailableLanguagesPrism;
 }
 
 
 
 export function GithubPermalinkBase(props: GithubPermalinkBaseProps) {
 
-    const { data, permalink, excludeLines, excludeText = "<snip>" } = props;
+    const { data, permalink, excludeLines, excludeText = "<snip>", } = props;
 
 
 
     if (data.status === "ok") {
 
         const formatedLineExclusions = formatForLineExclusions(data, excludeLines);
+        const language = props.language ?? getLanguageFromPath(data.path);
 
         const clipboard = formatedLineExclusions.reduce((acc, cur) => {
             if (cur.isExclude) {
@@ -41,11 +44,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} language={language} 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} language={language} key={v.from} />
 
             })}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		STORYBOOK_GITHUB_TOKEN=${GITHUB_TOKEN_READONLY}
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,8 @@ @@
     .pnp.js
     .yarn/install-state.gz
+    .env
     # testing
     /coverage
@@ Expand Down @@