diff --git a/package.json b/package.json
index fc63bbb6..7e837d88 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
 		"test:filter": "uvu -r ts-node/register",
 		"release": "pnpm -r build && changeset publish",
 		"changeset:add": "changeset add",
-		"changeset:version": "changeset version && pnpm i --lockfile-only"
+		"changeset:version": "changeset version && pnpm i --lockfile-only",
+		"site:dev": "pnpm --filter @mdsvex/site dev",
+		"site:build": "pnpm --filter @mdsvex/site build"
 	},
 	"keywords": [
 		"test",
diff --git a/packages/site/package.json b/packages/site/package.json
index a90a2c7c..ac0f64ec 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "mdsvex-playground",
+	"name": "@mdsvex/site",
 	"description": "Documentation side for mdsvex",
 	"version": "0.0.1",
 	"type": "module",
diff --git a/packages/site/src/routes/_docs.svtext b/packages/site/src/routes/_docs.svtext
index da5e442e..a80cf048 100644
--- a/packages/site/src/routes/_docs.svtext
+++ b/packages/site/src/routes/_docs.svtext
@@ -673,21 +673,30 @@ Frontmatter also interacts with layouts, you can find more details in the [Layou
 
 ## Integrations
 
-### With Sapper
+### With shiki
 
-To use mdsvex with sapper you need to add the mdsvex configuration to both the client and server sections of the rollup or webpack configuration. You will also need to add the CLI argument `--ext '.svelte .svx'` to all of the sapper scripts (`dev`, `build`, and `export`) in order to tell sapper that it should also allow `.svx` files to be page routes.
+You can use shiki for highlighting rather than prism by leveraging the `highlighter` option:
 
-Or you can use the templates:
-- [Rollup](https://github.com/pngwn/sapper-mdsvex-template)
+```js
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import { createHighlighter } from 'shiki';
 
-  ```bash
-  npx degit "pngwn/sapper-mdsvex-template" my-app
-  ```
-- [Webpack](https://github.com/shiryel/sapper-mdsvex-template-webpack)
+const theme = 'github-dark';
+const highlighter = await createHighlighter({
+	themes: [theme],
+	langs: ['javascript', 'typescript']
+});
 
-  ```bash
-  npx degit "shiryel/sapper-mdsvex-template-webpack" my-app
-  ```
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+	highlight: {
+		highlighter: async (code, lang = 'text') => {
+			const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme }));
+			return `{@html \\`${html}\\` }`;
+		}
+	},
+}
+```
 
 ## Limitations
 
diff --git a/packages/site/src/routes/docs/+page.svelte b/packages/site/src/routes/docs/+page.svelte
index d4ffafdd..c0ed144f 100644
--- a/packages/site/src/routes/docs/+page.svelte
+++ b/packages/site/src/routes/docs/+page.svelte
@@ -47,7 +47,7 @@
 		[
 			'Integrations',
 			'docs#integrations',
-			[['sapper', 'docs#with-sapper', false]],
+			[['shiki', 'docs#with-shiki', false]],
 		],
 		['Limitations', 'docs#limitations'],
 	];
diff --git a/packages/site/vite.config.js b/packages/site/vite.config.js
index f6d2ed24..33e88ebf 100644
--- a/packages/site/vite.config.js
+++ b/packages/site/vite.config.js
@@ -7,32 +7,32 @@ import link from 'rehype-autolink-headings';
 function mdsvex_transform() {
 	return {
 		async transform(code, id) {
-			if (extname(id) !== ".svtext") return;
+			if (extname(id) !== '.svtext') return;
 
 			const c = (
 				await mdsvex({
 					highlight: {
 						alias: {
-							ts: "typescript",
-							mdx: "markdown",
-							svelte: "svelte",
-							svx: "svx",
-							mdsvex: "svx",
-							sig: "ts",
-						}
+							ts: 'typescript',
+							mdx: 'markdown',
+							svelte: 'svelte',
+							svx: 'mdx',
+							mdsvex: 'svx',
+							sig: 'ts',
+						},
 					},
 					extension: '.svtext',
-					rehypePlugins: [slug, link]
+					rehypePlugins: [slug, link],
 				}).markup({ content: code, filename: id })
 			).code;
-			return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`;
-		}
+			return `export default \`${c.replace(/`/g, '\\`').trim()}\`;`;
+		},
 	};
 }
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [ mdsvex_transform(), sveltekit() ]
+	plugins: [mdsvex_transform(), sveltekit()],
 };
 
 export default config;