styles: highlight typescript syntax

package.json

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",

src/components/TsConversion.module.css

@@ -14,8 +14,8 @@
   gap: 0.5rem;
 }
 
-.ProgressData {
-  font-size: 0.75rem;
+.CodeContainer {
+  display: grid;
 }
 
 .Insights {

src/components/TsConversion.tsx

@@ -1,3 +1,8 @@
+import SyntaxHighlighter from "react-syntax-highlighter";
+import {
+  tomorrow,
+  tomorrowNightEighties,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { useCallback, useEffect, useState } from "react";
 import { clampLines } from "../utils/clampLines";
 import { Select } from "./Select";
@@ -7,6 +12,7 @@ import { map } from "../utils/map";
 import { Link } from "./Link";
 import style from "./TsConversion.module.css";
 import { toCamelCase } from "../utils/toCamelCase";
+import { useTheme } from "../utils/useTheme";
 
 // eslint-disable-next-line prefer-const
 let DEV_MODE = false;
@@ -28,6 +34,7 @@ export const TsConversion = () => {
   const [target, setTarget] = useState<InputType>(
     (query.get("target") as InputType) ?? undefined
   );
+  const theme = useTheme();
 
   useEffect(() => {
     if (source && target) {
@@ -120,9 +127,14 @@ export const TsConversion = () => {
                 </div>
               )}
               <div className={style.CodeExperience}>
-                <pre>
-                  <code>{clampLines(map[source][target].code)}</code>
-                </pre>
+                <div className={style.CodeContainer}>
+                  <SyntaxHighlighter
+                    language="typescript"
+                    style={theme === "dark" ? tomorrowNightEighties : tomorrow}
+                  >
+                    {clampLines(map[source][target].code)}
+                  </SyntaxHighlighter>
+                </div>
                 {map[source][target].playgroundUrl && (
                   <div>
                     <Link

src/index.css

@@ -70,10 +70,9 @@ pre > code {
 }
 
 pre {
-  padding: 1rem 1.5rem;
+  padding: 1rem 1.5rem !important;
   overflow: scroll;
   border-radius: 3px;
-  background-color: #575757;
 }
 
 code:not(pre > code) {
@@ -94,9 +93,8 @@ code:not(pre > code) {
   button {
     background-color: #f9f9f9;
   }
-
   pre {
-    background-color: #f2f2f2;
-    color: #213547;
+    /* override react-syntax-highlighter styles */
+    background-color: #f2f2f2 !important;
   }
 }

src/types/Theme.ts

@@ -0,0 +1 @@
+export type Theme = "dark" | "light";

src/utils/getDefaultTheme.ts

@@ -0,0 +1,16 @@
+import { Theme } from "../types/Theme";
+
+export const getDefaultTheme = (): Theme => {
+  if (window.matchMedia) {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+
+    return "light";
+  }
+
+  // when `matchMedia` is not supported, synchronise it to styles
+  // which use dark theme by default
+
+  return "dark";
+};

src/utils/useTheme.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { getDefaultTheme } from "./getDefaultTheme";
+import { Theme } from "../types/Theme";
+
+export const useTheme = () => {
+  const [theme, setTheme] = useState<Theme>(getDefaultTheme());
+
+  useEffect(() => {
+    const darkThemeListener = (e: MediaQueryListEvent) =>
+      e.matches && setTheme("dark");
+    const lightThemeListener = (e: MediaQueryListEvent) =>
+      e.matches && setTheme("light");
+
+    const darkColourScheme = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightColourScheme = window.matchMedia(
+      "(prefers-color-scheme: light)"
+    );
+
+    darkColourScheme.addEventListener("change", darkThemeListener);
+    lightColourScheme.addEventListener("change", lightThemeListener);
+
+    return () => {
+      darkColourScheme.removeEventListener("change", darkThemeListener);
+      lightColourScheme.removeEventListener("change", lightThemeListener);
+    };
+  }, []);
+
+  return theme;
+};