feat: markdown syntax highlighting

packages/website/src/pages/docs/[...slug].tsx

@@ -11,6 +11,7 @@ import { useRouter } from 'next/router';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import { VscChevronUp } from 'react-icons/vsc';
 import rehypeIgnore from 'rehype-ignore';
+import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
@@ -134,7 +135,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 			mdxOptions: {
 				remarkPlugins: [remarkGfm],
 				remarkRehypeOptions: { allowDangerousHtml: true },
-				rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug],
+				rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug, [rehypePrettyCode, { theme: 'dark-plus' }]],
 				format: 'md',
 			},
 		});

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -86,7 +86,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 	return props.error ? (
 		<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
 	) : (
-		<Container pt={128} size="xs">
+		<Container py={96} size="xs">
 			<Stack sx={{ flexGrow: 1 }}>
 				<Title order={2} ml="xs">
 					Select a version:

packages/website/src/pages/docs/packages/index.tsx

@@ -31,7 +31,7 @@ export default function PackagesRoute() {
 	const { colorScheme } = useMantineColorScheme();
 
 	return (
-		<Container pt={128} size="xs">
+		<Container py={96} size="xs">
 			<Stack sx={{ flexGrow: 1 }}>
 				<Title order={2} ml="xs">
 					Select a package: