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 {
+pre {
-	font-family: 'JetBrains Mono';
+	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 {
+code {
-	font-family: 'JetBrains Mono';
+	font-family: 'JetBrains Mono' !important;
 }

yarn.lock

@@ -2047,10 +2047,12 @@ __metadata:
     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
     typescript: ^4.7.4
     unocss: ^0.45.12
@@ -13397,6 +13399,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-numeric-range@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "parse-numeric-range@npm:1.3.0"
+  checksum: 289ca126d5b8ace7325b199218de198014f58ea6895ccc88a5247491d07f0143bf047f80b4a31784f1ca8911762278d7d6ecb90a31dfae31da91cc1a2524c8ce
+  languageName: node
+  linkType: hard
+
 "parse5@npm:^6.0.0":
   version: 6.0.1
   resolution: "parse5@npm:6.0.1"
@@ -14304,6 +14313,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-pretty-code@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "rehype-pretty-code@npm:0.3.2"
+  dependencies:
+    parse-numeric-range: ^1.3.0
+  peerDependencies:
+    shiki: "*"
+  checksum: 7d5f5dc4758e65f4a141bb22fe6863d3d7f1e9b1712fab5bde3a0e5611c89cc4d5945fda59b5d51f993404785d62c1dcac14ccc368ac7892fbed8cee026c843b
+  languageName: node
+  linkType: hard
+
 "rehype-raw@npm:^6.1.1":
   version: 6.1.1
   resolution: "rehype-raw@npm:6.1.1"
@@ -14899,6 +14919,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shiki@npm:^0.11.1":
+  version: 0.11.1
+  resolution: "shiki@npm:0.11.1"
+  dependencies:
+    jsonc-parser: ^3.0.0
+    vscode-oniguruma: ^1.6.1
+    vscode-textmate: ^6.0.0
+  checksum: 2a4ebc3b466816263fc244ae4f67a4ff96aa74d863b9c5e7e4affc50f37fd6d1a781405de0dbf763b777bc33e49a0d441de7ff3fededb8b01e3b8dbb37e2927d
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.4
   resolution: "side-channel@npm:1.0.4"
@@ -17185,6 +17216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vscode-textmate@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "vscode-textmate@npm:6.0.0"
+  checksum: ff6f17a406c2906586afc14ef01cb122e33acd35312e815abb5c924347a777c6783ce3fe7db8b83f1760ebf843c669843b9390f905b69c433b3395af28e4b483
+  languageName: node
+  linkType: hard
+
 "walk-back@npm:^2.0.1":
   version: 2.0.1
   resolution: "walk-back@npm:2.0.1"