docs: fix broken svelte-scoped examples (#2788)

examples/sveltekit-preprocess/README.md

@@ -4,7 +4,7 @@
 
 Use UnoCSS via a Svelte preprocessor to enable usage when building a component library. Read the [@unocss/svelte-scoped/preprocess docs](https://unocss.dev/integrations/svelte-scoped#preprocessor) for more information.
 
-## Usage
+## SvelteKit Library Usage
 
 To develop your library, run the following commands:
 
@@ -16,19 +16,19 @@ npm run dev
 To build your library:
 
 ```bash
-npm package
+npm run package
 ```
 
 To create a production version of your showcase app:
 
 ```bash
-npm build
+npm run build
 ```
 
-You can preview the production build with `npm preview`.
+You can preview the production build with `npm run preview`.
 
 To publish your library to [npm](https://www.npmjs.com):
 
 ```bash
-npm publish
+npm run publish
 ```

examples/sveltekit-preprocess/package.json

@@ -23,9 +23,6 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "svelte": "./dist/index.js",
-  "peerDependencies": {
-    "svelte": "^3.59.1"
-  },
   "devDependencies": {
     "@iconify-json/logos": "^1.1.33",
     "@sveltejs/adapter-auto": "^2.1.0",
@@ -44,6 +41,6 @@
   },
   "stackblitz": {
     "installDependencies": false,
-    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+    "startCommand": "node .stackblitz.js && npm install --legacy-peer-deps && npm run dev"
   }
 }

examples/sveltekit-scoped/package.json

@@ -14,11 +14,9 @@
     "@julr/unocss-preset-forms": "^0.0.5",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.20.4",
-    "@types/marked": "^5.0.0",
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "@unocss/svelte-scoped": "link:../../packages/svelte-scoped",
-    "marked": "^5.1.0",
     "svelte": "^4.0.0",
     "svelte-check": "^3.4.4",
     "tslib": "^2.5.3",

examples/sveltekit-scoped/src/routes/Prose.svelte

@@ -1,27 +1,28 @@
-<script lang="ts">
-  import { marked } from "marked";
-  marked.use({
-    mangle: false,
-    headerIds: false
-  });
-</script>
-
 <div
-  class="text-base prose prose-purple md:prose-orange  dark:prose-invert max-w-full text-left mt-10 p-3 md:p-5 shadow-lg border rounded"
+  class="text-base prose prose-purple md:prose-orange dark:prose-invert max-w-full text-left mt-10 p-3 md:p-5 shadow-lg border rounded"
 >
-  {@html marked.parse(`# Svelte Scoped Uno with SvelteKit
-  This project has the following **example usages**:
-  
-- dark mode
-- \`.logo\` shortcut
-- preflights
-- safelist
-- styles reset
-- parent dependent classes
-- children affecting classes
-- nested component styles (passed down through class prop)
-- Conditional \`class:\` syntax, including shorthand
-- --at-apply
-- This \`.prose\` block is from \`presetTypography()\`. Place the \`prose\` class into your safelist to make it work (as that class must be in the global stylesheet). Color classes like \`prose-purple\` are fine to use as you would any other utility class. You can put it in the safelist to have it in the global styles or leave it alone to have it be added just to the component(s) where used.
-`)}
+  <h1>Svelte Scoped Uno with SvelteKit</h1>
+
+  <p>This project has the following <b>example usages</b>:</p>
+
+  <ul>
+    <li>dark mode</li>
+    <li><code>.logo</code> shortcut</li>
+    <li>preflights</li>
+    <li>safelist</li>
+    <li>styles reset</li>
+    <li>parent dependent classes</li>
+    <li>children affecting classes</li>
+    <li>nested component styles (passed down through class prop)</li>
+    <li>Conditional <code>class:</code> syntax, including shorthand</li>
+    <li>--at-apply</li>
+    <li>
+      This <code>.prose</code> block is from <code>presetTypography()</code>. Place the <code>prose</code>
+      class into your safelist to make it work (as that class must be in the
+      global stylesheet). Color classes like <code>prose-purple</code> are fine to use as
+      you would any other utility class. You can put it in the safelist to have
+      it in the global styles or leave it alone to have it be added just to the
+      component(s) where used.
+    </li>
+  </ul>
 </div>