feat: markdown syntax highlighting

packages/website/package.json

@@ -57,10 +57,12 @@
 		"react-icons": "^4.4.0",
 		"react-syntax-highlighter": "^15.5.0",
 		"rehype-ignore": "^1.0.1",
+		"rehype-pretty-code": "^0.3.2",
 		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.0.1",
 		"remark-gfm": "^3.0.1",
 		"sharp": "^0.30.7",
+		"shiki": "^0.11.1",
 		"swr": "^1.3.0"
 	},
 	"devDependencies": {

packages/website/src/components/SidebarItems.tsx

@@ -1,7 +1,7 @@
 import { createStyles, Group, Text, NavLink, Box } from '@mantine/core';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import {
 	VscSymbolClass,
 	VscSymbolEnum,
@@ -99,10 +99,13 @@ export function SidebarItems({
 	setOpened: Dispatch<SetStateAction<boolean>>;
 }) {
 	const router = useRouter();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 	const { classes } = useStyles();
 	const groupItems = groupMembers(members);
 
-	const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
+	}, [router.asPath]);
 
 	return (
 		<Box pb="xl">

packages/website/src/components/SidebarLayout.tsx

@@ -103,6 +103,7 @@ export function SidebarLayout({
 	children,
 }: PropsWithChildren<Partial<SidebarLayoutProps>>) {
 	const router = useRouter();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 	const { data: versions } = useSWR<string[]>(
 		`https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`,
 		fetcher,
@@ -120,6 +121,10 @@ export function SidebarLayout({
 		setOpenedVersionPicker(false);
 	}, []);
 
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
+	}, [router.asPath]);
+
 	const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
 
 	const versionMenuItems =
@@ -129,8 +134,7 @@ export function SidebarLayout({
 			</Menu.Item>
 		)) ?? [];
 
-	const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0];
-	const breadcrumbs = asPathWithoutQueryAndAnchor?.split('/').map((path, idx, original) => (
+	const breadcrumbs = asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
 		<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
 			<Anchor component="a">{path}</Anchor>
 		</Link>

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:

packages/website/src/styles/main.css

@@ -24,10 +24,21 @@ body {
 	height: 100%;
 }
 
-code {
-	font-family: 'JetBrains Mono';
+pre {
+	font-size: 13px !important;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	tab-size: 4;
+	hyphens: none;
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	background: #1e1e1e;
+	border-radius: 4px;
 }
 
-pre {
-	font-family: 'JetBrains Mono';
+code {
+	font-family: 'JetBrains Mono' !important;
 }