Add code highlighting

site/package.json

@@ -29,6 +29,7 @@
 	"type": "module",
 	"dependencies": {
 		"@melt-ui/svelte": "^0.55.3",
+		"prismjs": "^1.29.0",
 		"svelte-focus-trap": "^1.2.0",
 		"t18s": "workspace:*"
 	}

site/src/lib/prism.css

@@ -0,0 +1,107 @@
+/**
+ * Gruvbox dark theme
+ *
+ * Adapted from a theme based on:
+ * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
+ *
+ * @author Azat S. <[email protected]>
+ * @version 1.0
+ */
+
+ code[class*="language-"],
+pre[class*="language-"] {
+	color: #ebdbb2; /* fg1 / fg */
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.delimiter,
+.token.boolean,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+	color: #fb4934; /* red2 */
+}
+
+.token.operator,
+.token.punctuation,
+.token.attr-name {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+	color: #fabd2f; /* yellow2 */
+}
+
+.token.entity,
+.token.number,
+.token.symbol {
+	color: #d3869b; /* purple2 */
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+	color: #fb4934; /* red2 */
+}
+
+.token.string,
+.token.char {
+	color: #b8bb26; /* green2 */
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.url {
+	color: #b8bb26; /* green2 */
+	text-decoration: underline;
+}
+
+.token.function {
+	color: #fabd2f; /* yellow2 */
+}
+
+.token.regex {
+	background: #b8bb26; /* green2 */
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.inserted {
+	background: #a89984; /* fg4 / gray1 */
+}
+
+.token.deleted {
+	background: #fb4934; /* red2 */
+}

site/src/lib/ui/Code/CodePanel.svelte

@@ -24,7 +24,7 @@
   class="group dark:bg-white/2.5" 
   hidden={!active} 
   role={$tabs.length > 1 ? "tabpanel" : null}
-  aria-labelledby={$tabs.length > 1 ? `code-group-${codeGroupId}-tab-${name}"` : null}
+  aria-labelledby={$tabs.length > 1 ? `code-group-${codeGroupId}-tab-${name}` : null}
 >
   {#if label || tag}
     <CodePanelHeader {tag} {label} />

site/src/lib/ui/Code/CodePanelBody.svelte

@@ -15,7 +15,8 @@
 </script>
 
 <div class="relative">
-  <pre class="overflow-x-auto p-4 text-xs text-white" bind:this={content}><slot
-    /></pre>
+  <div class="overflow-x-auto px-4 py-3 text-xs text-white font-mono leading-6" bind:this={content}>
+    <slot />
+  </div>
   <CopyButton on:click={saveCodeToClipboard} {copied} />
 </div>

site/src/lib/ui/Prism.svelte

@@ -0,0 +1,28 @@
+<script>
+    import Prism from "prismjs"
+    import "$lib/prism.css"
+    import "prismjs/components/prism-javascript.js"
+    import "prismjs/components/prism-typescript.js"
+    import "prismjs/components/prism-bash.js"
+    Prism.manual = true;
+
+    const GRAMMARS = {
+        //@ts-ignore
+        "javascript" : Prism.languages.javascript,
+        //@ts-ignore
+        "typescript" : Prism.languages.typescript,
+        //@ts-ignore
+        "bash" : Prism.languages.bash,
+    }
+
+    /** @type {keyof typeof GRAMMARS}*/
+    export let language;
+
+     /** @type {string}*/
+    export let code;
+
+    $: html = Prism.highlight(code, GRAMMARS[language], language);
+</script>
+
+<svelte:options immutable={true} />
+<pre class="language-{language}"><code class="language-{language}">{@html html}</code></pre>

site/src/routes/[[locale=locale]]/+page.svelte

@@ -1,10 +1,16 @@
 <script>
   import CodeGroup from "$lib/ui/CodeGroup.svelte";
+  import Prism from "$lib/ui/Prism.svelte";
 </script>
 
 <CodeGroup let:Header let:Tab>
   <Header title="Installation" />
-  <Tab name="npm">npm install --save-dev t18s</Tab>
-  <Tab name="yarn">yarn add --dev t18s</Tab>
-  <Tab name="pnpm">pnpm add --save-dev t18s</Tab>
-</CodeGroup>
+  <Tab name="npm"><Prism code="npm install --save-dev t18s" language="bash" /></Tab>
+  <Tab name="yarn"><Prism code="yarn add --dev t18s" language="bash" /></Tab>
+  <Tab name="pnpm"><Prism code="pnpm add --save-dev t18s" language="bash" /></Tab>
+</CodeGroup>
+
+<CodeGroup let:Header let:Tab>
+  <Header title="Highlighting" />
+  <Tab><Prism code="console.log('Hello World')" language="javascript" /></Tab>
+</CodeGroup>

site/src/routes/[[locale=locale]]/getting-started/+page.svelte

@@ -1,28 +1,27 @@
 <script>
   import CodeGroup from "$lib/ui/CodeGroup.svelte";
-
+  import ViteConfigSnippet from "./vite-config-snippet.js?raw";
+  import Prism from "$lib/ui/Prism.svelte";
 </script>
+
 <h1>Getting Started</h1>
 
-<p>
-    First you need to install t18s as a dev dependency.
-</p>
+<p>First you need to install t18s as a dev dependency.</p>
 
 <CodeGroup let:Tab>
-    <Tab>npm install --save-dev t18s</Tab>
+  <Tab>npm install --save-dev t18s</Tab>
 </CodeGroup>
 
 <p>
-    T18S isn't just a library, it's a vite-plugin, so you will need to register it in your vite config.
+  T18S isn't just a library, it's a vite-plugin, so you will need to register it
+  in your vite config.
 </p>
 
 <CodeGroup let:Header let:Tab>
-    <Header title="vite.config.js" />
-    <Tab>
-        
-    </Tab>
+  <Header title="vite.config.js" />
+  <Tab>
+    <Prism code={ViteConfigSnippet} language="javascript" />
+  </Tab>
 </CodeGroup>
 
-<p>
-    Aaaand we're off.
-</p>
+<p>Aaaand we're off.</p>

site/src/routes/[[locale=locale]]/getting-started/vite-config-snippet.js

@@ -0,0 +1,13 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { t18s } from "t18s";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    sveltekit(),
+    t18s({
+      locales: ["en", "de"],
+      fallbackLocale: "en",
+    }),
+  ],
+});