feat: add syntax highlighting

README.md

@@ -2,16 +2,17 @@
 
 A minimal web-UI for talking to [Ollama](https://github.com/jmorganca/ollama/) servers.
 
-> ![image](https://github.com/fmaclen/hollama/assets/1434675/da94d369-3642-45b2-8843-e4ffe648ffcf)
+> ![localhost_5173_5ggycv](https://github.com/fmaclen/hollama/assets/1434675/e75b5f6b-5bb7-4912-9583-36be5d6ac54b)
 > ![localhost_5173_iavqp6 (1)](https://github.com/fmaclen/hollama/assets/1434675/8ad2e4d0-94e7-4d9e-ac62-69a05b00a77f)
 
 
 ### Features
 
 - Large prompt fields
-- Streams responses
+- Streams completions
+- Copy completions as raw text
+- Markdown parsing w/syntax highlighting
 - Saves sessions/context in your browser's `localStorage`
-- Markdown parsing
 
 ## Developing
 

package.json

@@ -33,6 +33,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.9",
+		"sass": "^1.75.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.3.6",

src/app.pcss

@@ -34,6 +34,8 @@
     --ring: 0 0% 3.9%;
 
     --radius: 0.5rem;
+
+    --code: 0 0% 90%;
   }
 
   .dark {
@@ -65,6 +67,8 @@
     --destructive-foreground: 0 0% 98%;
 
     --ring: 0 0% 83.1%;
+
+    --code: 0 0% 10%;
   }
 }
 
@@ -75,4 +79,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/lib/components/ui/button/index.ts

@@ -3,7 +3,7 @@ import type { Button as ButtonPrimitive } from "bits-ui";
 import Root from "./button.svelte";
 
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-foreground",
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",

src/routes/+layout.svelte

@@ -8,7 +8,6 @@
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 
 	import { sessionsStore } from '$lib/store';
-	import type { Session } from '$lib/sessions';
 
 	let newSessionId: string;
 
@@ -20,7 +19,7 @@
 </script>
 
 <div
-	class="grid h-screen w-screen grid-cols-[max-content,max-content,280px,max-content,1fr] text-current"
+	class="grid h-screen w-screen grid-cols-[max-content,max-content,280px,max-content,1fr] text-current bg-body"
 >
 	<a href="/" class="flex flex-col items-center justify-between py-6 hover:bg-accent">
 		<img src="/favicon.png" alt="Hollama logo" width="48" height="48" />
@@ -63,7 +62,7 @@
 						aria-label={`Session ${session.id}`}
 						transition:slide
 					>
-						<p class="max-w-full truncate whitespace-nowrap text-sm font-bold">
+						<p class="max-w-full truncate whitespace-nowrap text-sm font-bold text-foreground">
 							{session.messages[0].content}
 						</p>
 						<p

src/routes/+page.svelte

@@ -99,7 +99,7 @@
 	`;
 </script>
 
-<div class="flex w-full flex-col bg-gray-100">
+<div class="flex w-full flex-col bg-secondary">
 	<div class="justify-content-center m-auto max-w-[40ch] p-6">
 		<div class={_container}>
 			<Label class={_label}>

src/routes/[id]/+page.svelte

@@ -114,7 +114,7 @@
 <div class="flex h-screen w-full flex-col">
 	<div class="flex items-center justify-between px-6 py-4">
 		<div class="space-y-1">
-			<p data-testid="session-id" class="text-sm font-bold leading-none">
+			<p data-testid="session-id" class="text-foreground text-sm font-bold leading-none">
 				Session <a class={_a} href={`/${session.id}`}>#{session.id}</a><br />
 			</p>
 			<p data-testid="model-name" class="text-sm text-muted-foreground">{session.model}</p>

src/routes/[id]/Article.svelte

@@ -1,12 +1,25 @@
 <script lang="ts">
 	import MarkdownIt from 'markdown-it';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/github.css';
 	import { Files } from 'lucide-svelte';
 
 	import { type Message } from '$lib/sessions';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 
-	const md = new MarkdownIt();
+	const md: MarkdownIt = new MarkdownIt({
+		highlight: function (str, lang) {
+			if (lang && hljs.getLanguage(lang)) {
+				try {
+					return `<pre><code class="hljs">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
+				} catch (__) {}
+			}
+
+			return `<pre><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>
+		`;
+		}
+	});
 
 	export let message: Message;
 
@@ -15,19 +28,11 @@
 	}
 </script>
 
-<article class="flex flex-col gap-y-3">
+<article class="mx-auto flex w-full max-w-[70ch] flex-col gap-y-3">
 	<nav class="grid grid-cols-[max-content_auto_max-content] items-center">
 		<p
 			data-testid="session-role"
-			class="
-			mr-3
-			text-center
-			text-xs
-			font-bold
-			uppercase
-			leading-7
-			text-muted-foreground
-		"
+			class="mr-3 text-center text-xs font-bold uppercase leading-7 text-muted-foreground"
 		>
 			{message.role === 'user' ? 'You' : message.role}
 		</p>
@@ -43,42 +48,65 @@
 		</Button>
 	</nav>
 
-	<div
-		class="
-		px-[3ch]
-		mx-auto
-		w-full
-		max-w-[60ch]
-		text-md overflow-x-auto
-
-		[&>p:not(:first-child,:last-child)]:my-4
-		[&>p>code]:my-4
-		[&>p>code]:rounded-md
-		[&>p>code]:bg-gray-300
-		[&>p>code]:p-1
-		[&>p>code]:text-sm
-		[&>p>code]:opacity-75
-
-		[&>pre:not(:first-child,:last-child)>code]:my-4
-		[&>pre>code]:block
-		[&>pre>code]:overflow-y-auto
-		[&>pre>code]:rounded-md
-		[&>pre>code]:bg-gray-300
-		[&>pre>code]:p-4
-		[&>pre>code]:text-sm
-		[&>pre>code]:opacity-75
-
-		[&>ul]:flex
-		[&>ul]:list-outside
-		[&>ul]:list-disc
-		[&>ul]:flex-col
-		[&>ul]:gap-y-1
-		[&>ul]:my-4
-		[&>ul]:mx-8
-	"
-	>
+	<div id="markdown" class="text-md mx-auto w-full overflow-x-auto px-[3ch]">
 		{#if message.content}
 			{@html md.render(message.content)}
 		{/if}
 	</div>
 </article>
+
+<style lang="scss">
+	#markdown {
+		:global(> *) {
+			@apply text-foreground;
+		}
+
+		:global(> *:not(:first-child)) {
+			@apply mt-4;
+		}
+
+		:global(> *:not(:last-child)) {
+			@apply mb-4;
+		}
+
+		:global(pre > code) {
+			@apply rounded-md p-4 text-sm;
+		}
+
+		:global(li > code),
+		:global(p > code) {
+			@apply rounded-md bg-code p-1 text-sm opacity-75;
+		}
+
+		:global(ol),
+		:global(ul) {
+			@apply mx-8 flex list-outside flex-col gap-y-1;
+		}
+
+		:global(ol) {
+			@apply list-decimal;
+		}
+
+		:global(ul) {
+			@apply list-disc;
+		}
+
+		:global(h1) {
+			@apply text-3xl font-bold;
+		}
+
+		:global(h2) {
+			@apply text-2xl font-bold;
+		}
+
+		:global(h3) {
+			@apply text-xl font-bold;
+		}
+
+		:global(h4),
+		:global(h5),
+		:global(h5) {
+			@apply text-lg font-bold;
+		}
+	}
+</style>

tailwind.config.js

@@ -47,18 +47,24 @@ const config = {
 				card: {
 					DEFAULT: "hsl(var(--card) / <alpha-value>)",
 					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				}
-			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
-			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
+				},
+				body: {
+					DEFAULT: "hsl(var(--background) / <alpha-value>)"
+				},
+				code: {
+					DEFAULT: "hsl(var(--code) / <alpha-value>)"
+				},
 			}
+		},
+		borderRadius: {
+			lg: "var(--radius)",
+			md: "calc(var(--radius) - 2px)",
+			sm: "calc(var(--radius) - 4px)"
+		},
+		fontFamily: {
+			sans: [...fontFamily.sans]
 		}
-	},
+	}
 };
 
 export default config;