docs: replace sapper docs with shiki docs

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",

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",

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
 

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'],
 	];

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;