Text display is good now

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.15.5",
-    "next": "14.2.9",
+    "next": "^14.2.12",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18",
     "react-dom": "^18"
   },

src/app/[...file]/content.tsx

@@ -60,7 +60,36 @@ export default function Content({ src }: { src: string}) {
 					return response.text();
 				},
 				postprocess: (data: string) => {
-					set_content(<Text text={data} />);
+					const languages = {
+						//     "markup",
+						js:    "jsx",
+						mjs:   "jsx",
+						jsx:   "jsx",
+						//     "js-extras",
+						ts:    "tsx",
+						tsx:   "tsx",
+						swift: "swift",
+						kt:    "kotlin",
+						kts:   "kotlin",
+						ktm:   "kotlin",
+						//     "objectivec",
+						//     "reason",
+						rs:    "rust",
+						//     "graphql",
+						yml:   "yaml",
+						yaml:  "yaml",
+						go:    "go",
+						c:     "cpp",
+						cpp:   "cpp",
+						cxx:   "cpp",
+						h:     "cpp",
+						hpp:   "cpp",
+						hxx:   "cpp",
+						py:    "python",
+						json:  "json",
+					}
+					const split = window.location.pathname.split('.');
+					set_content(<Text language={split.length == 0 ? 'none' : languages[split[split.length - 1]]} text={data} />);
 				}
 			};
 		}

src/app/[...file]/types/text.css.ts

@@ -5,23 +5,21 @@ import * as colors from '../../colors.css'
 export const group = style({
 	display:    'flex',
 	fontFamily: 'monospace',
-	fontSize:   '1.1em',
+	fontSize:   '1em',
 	lineHeight: '1.4em',
-	whiteSpace: 'pre-wrap',
+	whiteSpace: 'pre',
 	tabSize:    4,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '1.1em',
+		}
+	}
 });
 
 export const line_numbers = style({
-	margin:       0,
+	margin:       '0',
 	marginRight:  '0.5em',
-	borderRight:  `1px solid ${colors.background2}`,
 	paddingRight: '0.5em',
 	color:        colors.foreground2,
-});
+	textAlign:    'right',
-
-export const content = style({
-});
-
-export const text = style({
-	margin: 0,
 });

src/app/[...file]/types/text.tsx

@@ -1,24 +1,46 @@
+import { useEffect, useState } from 'react';
+import { Highlight, themes } from 'prism-react-renderer';
+
 import * as style from './text.css';
 
-export default function Text({ text }: { text: string }) {
+export default function Text({ language, text }: { language: string, text: string }) {
+	console.log(language);
 	const lines = text.split('\n');
 
-	return (
+	const media_matcher = window.matchMedia('(prefers-color-scheme: light)');
-		<div className={style.group}>
+	const [light_theme, set_light_theme] = useState(media_matcher.matches);
-			<div className={style.line_numbers}>
+
-				{lines.map((_, index) => {
+	function check_light_theme(event) {
-					return <p key={index} className={style.text}>{index}</p>;
+		if (light_theme != event.matches) {
-				})}
+			set_light_theme(!light_theme);
-			</div>
-			<div className={style.content}>
-				{lines.map((line, index) => {
-					if (line != '') {
-						return <p key={index} className={style.text}>{line}</p>;
-					} else {
-						return <p key={index} className={style.text}>{'\n'}</p>;
 		}
-				})}
+	}
+
+	useEffect(() => {
+		media_matcher.addEventListener('change', check_light_theme);
+		return () => {
+			media_matcher.removeEventListener('change', check_light_theme);
+		};
+	});
+
+	return <div className={style.group}>
+		<p className={style.line_numbers}>{lines.map((_, index) => `${index}\n`)}</p>
+		<Highlight
+			theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']}
+			code={text}
+			language={language}
+		>
+			{({ className, style, tokens, getLineProps, getTokenProps }) => (
+				<div>
+					{tokens.map((line, i) => (
+						<div key={i} {...getLineProps({ line })}>
+							{line.map((token, key) => (
+								<span key={key} {...getTokenProps({ token })} />
+							))}
 						</div>
+					))}
 				</div>
-	);
+			)}
+		</Highlight>
+	</div>;
 }

src/app/colors.css.ts

@@ -11,7 +11,7 @@ globalStyle(':root', {
 		[background]:  '#000000',
 		[background2]: '#303030',
 		[foreground]:  '#F0F0F0',
-		[foreground2]: '#777777',
+		[foreground2]: '#888888',
 		[accent]:      '#B454EA',
 	},
 	'@media': {
@@ -20,7 +20,7 @@ globalStyle(':root', {
 				[background]:  '#FFFFFF',
 				[background2]: '#DADADA',
 				[foreground]:  '#171717',
-				[foreground2]: '#333333',
+				[foreground2]: '#777777',
 				[accent]:      '#9834D4',
 			}
 		}