fix(code): add prism.js support for syntax highlighting and codeblocks languange

packages/dashboard/package.json

@@ -30,6 +30,7 @@
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/js-cookie": "^3.0.6",
+    "@types/prismjs": "^1.26.5",
     "autoprefixer": "^10.4.21",
     "cron-parser": "^5.3.0",
     "d3-scale": "^4.0.2",
@@ -40,6 +41,7 @@
     "mdsvex": "^0.12.6",
     "mdsvex-enhanced-images": "^0.2.3",
     "pockethost": "workspace:^",
+    "prismjs": "^1.30.0",
     "sass": "^1.89.2",
     "svelte": "^5.34.9",
     "svelte-check": "^4.2.2",

packages/dashboard/src/app.css

@@ -1,8 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
+@import "prismjs/themes/prism-twilight.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 * {
  font-family: 'Figtree', sans-serif;
 }
@@ -35,6 +37,11 @@
   @apply bg-[#111111] border border-white/10;
 }
 
+pre {
+  border: none !important;
+  box-shadow: none !important;
+}
+
     
 
 .alert-error {

packages/dashboard/src/components/CodeSample.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import CopyButton from '$components/CopyButton.svelte'
   import { Highlight } from 'svelte-highlight'
-  import { typescript, type LanguageType } from 'svelte-highlight/languages'
-  import a11yDark from 'svelte-highlight/styles/a11y-dark'
+  import { typescript, dns, plaintext, bash, type LanguageType } from 'svelte-highlight/languages'
+  import a11yDark from 'svelte-highlight/styles/seti-ui'
 
   export let code: string
-  export let language: LanguageType<'typescript' | 'bash' | 'dns'> = typescript
-
+  export let language: LanguageType<'typescript' | 'bash' | 'dns' | 'plaintext'> = typescript
   const handleCopy = () => {}
 </script>
 

packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte

@@ -12,6 +12,8 @@
   import { faExternalLinkAlt, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
   import Logo from '$src/routes/Navbar/Logo.svelte'
   import { onMount } from 'svelte'
+  import Prism from "prismjs";
+  import "prismjs/components/prism-typescript";
 
   let isReady = false
   let sidebarOpen = false;
@@ -51,6 +53,10 @@
   $: isActive = (path: string) => $page.url.pathname.endsWith(path)
   $: activeClass = (path: string) => (isActive(path) ? 'text-secondary' : '')
 
+  onMount(() => {
+    Prism.highlightAll();
+  });
+
 </script>
 
 <svelte:head>

packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import CodeSample from '$components/CodeSample.svelte'
   import CardHeader from '$src/components/cards/CardHeader.svelte'
+  import { plaintext } from 'svelte-highlight/languages'
+
   import { INSTANCE_URL } from '$src/env'
 
   import { instance } from './store'
@@ -25,7 +27,7 @@
   <!-- These should be p but the inside already has p -->
   <div>
     <p class="mb-2">Your PocketBase URL is</p>
-    <CodeSample code={url} />
+    <CodeSample code={url} language={plaintext} />
   </div>
 
   <div>

pnpm-lock.yaml

@@ -94,6 +94,9 @@ importers:
       '@types/js-cookie':
         specifier: ^3.0.6
         version: 3.0.6
+      '@types/prismjs':
+        specifier: ^1.26.5
+        version: 1.26.5
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -124,6 +127,9 @@ importers:
       pockethost:
         specifier: workspace:^
         version: link:../pockethost
+      prismjs:
+        specifier: ^1.30.0
+        version: 1.30.0
       sass:
         specifier: ^1.89.2
         version: 1.89.2
@@ -1772,6 +1778,9 @@ packages:
   '@types/node@8.10.66':
     resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
 
+  '@types/prismjs@1.26.5':
+    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
+
   '@types/qs@6.9.17':
     resolution: {integrity: sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==}
 
@@ -5557,6 +5566,8 @@ snapshots:
 
   '@types/node@8.10.66': {}
 
+  '@types/prismjs@1.26.5': {}
+
   '@types/qs@6.9.17': {}
 
   '@types/range-parser@1.2.7': {}