Change syntax highlighter from PrismJS to Shiki

.prettierignore

@@ -2,4 +2,5 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
-src/lib/components/ui/**
+src/lib/components/ui/**
+.github/*.md

package.json

@@ -46,7 +46,6 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.1",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.1",
-		"@types/prismjs": "^1.26.5",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "1.0.0-next.60",
 		"clsx": "^2.1.1",
@@ -61,9 +60,8 @@
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.8",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"prism-svelte": "^0.5.0",
-		"prismjs": "^1.29.0",
 		"publint": "^0.2.12",
+		"shiki": "^1.23.1",
 		"svelte": "^5.2.4",
 		"svelte-check": "^4.0.9",
 		"tailwind-merge": "^2.5.4",

src/content/CodeBlock.svelte

@@ -1,18 +1,43 @@
 <script lang="ts">
-	import Prism from 'prismjs';
-	import 'prism-svelte';
+	import { createHighlighterCoreSync, createJavaScriptRegexEngine } from 'shiki';
+	import svelte from 'shiki/langs/svelte.mjs';
+	import dark from 'shiki/themes/github-dark-default.mjs';
 
 	let {
-		content,
-		lang = 'svelte'
+		content
 	}: {
 		content: string;
-		lang: string;
 	} = $props();
 
-	let highlighted = $derived(Prism.highlight(content, Prism.languages[lang], 'svelte'));
+	const shiki = createHighlighterCoreSync({
+		themes: [dark],
+		langs: [svelte],
+		engine: createJavaScriptRegexEngine()
+	});
+
+	const highlighted = $derived.by(() => {
+		return shiki.codeToHtml(content.trim(), { lang: 'svelte', theme: 'github-dark-default' });
+	});
 </script>
 
-<div class="my-6 text-[14px] subpixel-antialiased">
-	<pre class={`language-${lang}`}><code class={`language-${lang}`}>{@html highlighted}</code></pre>
+<div class="my-6 subpixel-antialiased">
+	{@html highlighted}
 </div>
+
+<style>
+	:global(.shiki code) {
+		tab-size: 2;
+		counter-reset: step;
+		counter-increment: step 0;
+	}
+
+	:global(.shiki code .line::before) {
+		content: counter(step);
+		counter-increment: step;
+		width: 1rem;
+		margin-right: 1.5rem;
+		display: inline-block;
+		text-align: right;
+		color: rgba(115, 138, 148, 0.4);
+	}
+</style>

src/content/examples/clusters/content.svelte.md

@@ -11,4 +11,4 @@ description: Use MapLibre's built-in functions to visualize points as clusters.
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/content/examples/complex/content.svelte.md

@@ -11,4 +11,4 @@ description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/content/examples/plain/content.svelte.md

@@ -11,4 +11,4 @@ description: Plain map.
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/content/examples/side-by-side/content.svelte.md

@@ -11,4 +11,4 @@ description: Synchronize two maps.
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/content/examples/terrain/content.svelte.md

@@ -11,4 +11,4 @@ description: 3D terrain and sky.
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/content/examples/video-on-a-map/content.svelte.md

@@ -11,4 +11,4 @@ description: Display a video.
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} />

src/routes/+layout.svelte

@@ -4,8 +4,6 @@
 	import '$lib/assets/fonts/geist.css';
 	import Header from './Header.svelte';
 
-	import '$lib/assets/prism-dark.css';
-
 	let { children } = $props();
 </script>
 

svelte.config.js

@@ -1,12 +1,33 @@
-import { mdsvex } from 'mdsvex';
+// mdsvex
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import { createHighlighter } from 'shiki';
+
+const theme = 'github-dark-default';
+const highlighter = await createHighlighter({
+	themes: [theme],
+	langs: ['javascript', 'typescript', 'svelte']
+});
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+	highlight: {
+		highlighter: async (code, lang = 'text') => {
+			const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme }));
+			return `{@html \`${html}\` }`;
+		}
+	},
+	extensions: ['.svelte.md', '.svx']
+};
+
+// SvelteKit
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
-	preprocess: [vitePreprocess(), mdsvex({ extensions: ['.svelte.md', '.svx'] })],
+	preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.