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: {

yarn.lock

@@ -1980,6 +1980,7 @@ __metadata:
     "@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
@@ -2009,6 +2010,7 @@ __metadata:
     happy-dom: ^6.0.4
     next: ^12.2.5
     prettier: ^2.7.1
+    prism-react-renderer: ^1.3.5
     react: ^18.2.0
     react-dom: ^18.2.0
     react-icons: ^4.4.0
@@ -2758,6 +2760,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/prism@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "@mantine/prism@npm:5.1.6"
+  dependencies:
+    "@mantine/utils": 5.1.6
+    prism-react-renderer: ^1.2.1
+  peerDependencies:
+    "@mantine/core": 5.1.6
+    "@mantine/hooks": 5.1.6
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 6fc07858c77b9b57a085e6b2b502612cdb5dcb3417f9c044a8974a5e113013dcb88bff4769853abcb830bd18e419d5c088800f634f6acfe0f67229122137e779
+  languageName: node
+  linkType: hard
+
 "@mantine/spotlight@npm:^5.1.6":
   version: 5.1.6
   resolution: "@mantine/spotlight@npm:5.1.6"
@@ -12746,6 +12763,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prism-react-renderer@npm:^1.2.1, prism-react-renderer@npm:^1.3.5":
+  version: 1.3.5
+  resolution: "prism-react-renderer@npm:1.3.5"
+  peerDependencies:
+    react: ">=0.14.9"
+  checksum: c18806dcbc4c0b4fd6fd15bd06b4f7c0a6da98d93af235c3e970854994eb9b59e23315abb6cfc29e69da26d36709a47e25da85ab27fed81b6812f0a52caf6dfa
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.27.0":
   version: 1.28.0
   resolution: "prismjs@npm:1.28.0"