code highlighting stuff

package.json

@@ -54,7 +54,7 @@
 		"react-use-error-boundary": "^3.0.0",
 		"remark-gfm": "^3.0.1",
 		"reoverlay": "^1.0.3",
-		"styled-components": "^5.3.10",
+		"styled-components": "^5.3.11",
 		"use-resize-observer": "^9.1.0"
 	},
 	"devDependencies": {
@@ -74,8 +74,8 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
 		"internal-ip": "^7.0.0",
-		"typescript": "^5.0.2",
-		"vite": "^4.4.5",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.9",
 		"vite-plugin-chunk-split": "^0.4.7",
 		"vite-plugin-clean": "^1.0.0",
 		"vite-plugin-html": "^3.2.0",

src/components/Codeblock.tsx

@@ -12,12 +12,6 @@ const Actions = styled.div`
 	display: flex;
 	gap: 5px;
 
-	span {
-		font-size: 12px;
-		background: var(--background-tertiary);
-		padding: 2px 6px;
-	}
-
 	a {
 		color: var(--text);
 		cursor: pointer;
@@ -63,7 +57,6 @@ function CodeBlock(props: Props) {
 			}}
 		>
 			<Actions>
-				{props.lang && <span>{props.lang ?? "N/A"}</span>}
 				<Tooltip title="Copy to Clipboard" placement="top">
 					<a onClick={onCopy}>{text}</a>
 				</Tooltip>

src/components/markdown/MarkdownRenderer.tsx

@@ -36,6 +36,18 @@ const Container = styled.div`
 	code {
 		font-size: 85%;
 	}
+
+	.syntaxHighlighter {
+		// remove excessive left "padding" in line numbers
+		.linenumber {
+			min-width: 0 !important;
+		}
+
+		// append vertical pipe to line numbers
+		.linenumber::after {
+			content: " |";
+		}
+	}
 `;
 
 /**
@@ -102,19 +114,21 @@ export default React.memo(({ content }: MarkdownProps) => {
 			<ReactMarkdown
 				remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
 				children={sanitizedContent}
-				// @ts-expect-error idk what is going on here, but this is correct
+				// @ts-expect-error type issue
 				components={{
 					code({ node, inline, className, children, ...props }) {
 						const match = /language-(\w+)/.exec(className || "");
 						return !inline ? (
 							<CodeBlock lang={match ? match[1] : undefined}>
 								<SyntaxHighlighter
+									className="syntaxHighlighter"
 									children={String(children).replace(/\n$/, "")}
 									language={match ? match[1] : undefined}
-									// @ts-expect-error types are broken
+									// @ts-expect-error type issue
 									style={style}
-									showLineNumbers
-									{...props}
+									showLineNumbers={true}
+									showInlineLineNumbers={true}
+									PreTag="div"
 								/>
 							</CodeBlock>
 						) : (