From 5094057a94696c4cf755749c870f68a64e88a3d4 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 13 Aug 2024 16:08:11 -0700
Subject: [PATCH] docs: replace sapper docs with shiki docs

---
 packages/site/src/routes/_docs.svtext      | 35 +++++++++++++++-------
 packages/site/src/routes/docs/+page.svelte |  2 +-
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/site/src/routes/_docs.svtext b/packages/site/src/routes/_docs.svtext
index b560f72b..f1cefe54 100644
--- a/packages/site/src/routes/_docs.svtext
+++ b/packages/site/src/routes/_docs.svtext
@@ -662,21 +662,34 @@ 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 langs = ['javascript', 'typescript'];
+const highlighter = await createHighlighter({
+	themes: [theme],
+	langs
+});
+for (const lang of langs) {
+	await highlighter.loadLanguage(lang);
+}
 
-  ```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'],
 	];