refactor(website): use mantine code blocks (#8512)

packages/website/package.json

@@ -54,6 +54,7 @@
 		"@mantine/hooks": "^5.1.6",
 		"@mantine/next": "^5.1.6",
 		"@mantine/nprogress": "^5.1.6",
+		"@mantine/prism": "^5.1.6",
 		"@mantine/spotlight": "^5.1.6",
 		"@microsoft/api-extractor-model": "^7.23.0",
 		"@microsoft/tsdoc": "0.14.1",
@@ -90,6 +91,7 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"happy-dom": "^6.0.4",
 		"prettier": "^2.7.1",
+		"prism-react-renderer": "^1.3.5",
 		"typescript": "^4.7.4",
 		"unocss": "^0.45.6",
 		"vercel": "^28.0.1",

packages/website/src/components/DocContainer.tsx

@@ -1,9 +1,8 @@
 import { Group, Stack, Title, Text, Box } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
+import { Prism } from '@mantine/prism';
 import type { ReactNode } from 'react';
 import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TypeParamTable } from './TypeParamTable';
@@ -51,14 +50,9 @@ export function DocContainer({
 			</Section>
 
 			<Box px="xs" pb="xs">
-				<SyntaxHighlighter
-					wrapLongLines
-					language="typescript"
-					style={vscDarkPlus}
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-				>
+				<Prism language="typescript" colorScheme="dark">
 					{excerpt}
-				</SyntaxHighlighter>
+				</Prism>
 			</Box>
 
 			{extendsTokens?.length ? (

packages/website/src/components/tsdoc/TSDoc.tsx

@@ -1,9 +1,9 @@
-import { Anchor, Box, Text } from '@mantine/core';
+import { Anchor, Box, Code, Text } from '@mantine/core';
+import { Prism } from '@mantine/prism';
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
+import type { Language } from 'prism-react-renderer';
 import type { ReactNode } from 'react';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { BlockComment } from './BlockComment';
 import type { DocBlockJSON } from '~/DocModel/comment/CommentBlock';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
@@ -61,24 +61,17 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 			case DocNodeKind.CodeSpan: {
 				const { code } = node as DocFencedCodeJSON;
 				return (
-					<pre key={idx} className="inline">
+					<Code key={idx} className="inline text-sm font-mono">
 						{code}
-					</pre>
+					</Code>
 				);
 			}
 			case DocNodeKind.FencedCode: {
 				const { language, code } = node as DocFencedCodeJSON;
 				return (
-					<SyntaxHighlighter
-						key={idx}
-						wrapLines
-						wrapLongLines
-						language={language}
-						style={vscDarkPlus}
-						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					>
+					<Prism key={idx} language={language as Language} withLineNumbers colorScheme="dark">
 						{code}
-					</SyntaxHighlighter>
+					</Prism>
 				);
 			}
 			case DocNodeKind.Block: {