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

@@ -21,12 +21,9 @@ export const group = style({
 
 export const line_numbers = style({
 	margin:       '0',
-	marginRight:  '1em',
+	marginRight:  '0.5em',
+	paddingRight: '0.5em',
 	color:        colors.foreground2,
 	textAlign:    'right',
 	userSelect:   'none',
 });
-
-export const plain = style({
-	margin: 0,
-});

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

@@ -38,6 +38,7 @@ const type_map = {
 	json:       'json',
 	md:         'markdown',
 	markdown:   'markdown',
+	none:       'none',
 }
 
 export function map_to_type(extension?: string) {
@@ -67,28 +68,24 @@ export default function Text({ language, text, line_numbers }: { language: strin
 		};
 	});
 
-	console.log(language, language in type_map);
 	return <div className={style.group}>
 		{line_numbers ? <p className={style.line_numbers}>{lines.map((_, index) => `${index}\n`)}</p> : <></>}
-		{language in type_map ?
+		<Highlight
-			<Highlight
+			theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']}
-				theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']}
+			code={text}
-				code={text}
+			language={language}
-				language={language}
+		>
-			>
+			{({ tokens, getLineProps, getTokenProps }) => (
-				{({ tokens, getLineProps, getTokenProps }) => (
+				<div>
-					<div>
+					{tokens.map((line, i) => (
-						{tokens.map((line, i) => (
+						<div key={i} {...getLineProps({ line })}>
-							<div key={i} {...getLineProps({ line })}>
+							{line.map((token, key) => (
-								{line.map((token, key) => (
+								<span key={key} {...getTokenProps({ token })} />
-									<span key={key} {...getTokenProps({ token })} />
+							))}
-								))}
+						</div>
-							</div>
+					))}
-						))}
+				</div>
-					</div>
+			)}
-				)}
+		</Highlight>
-			</Highlight> :
-			<p className={style.plain}>{text}</p>
-		}
 	</div>;
 }