Markdown

1<script lang="ts">
2	import { cn } from '$UTILS$';
3
4	let {
5		content = '',
6		class: className
7	}: {
8		content: string;
9		class?: string;
10	} = $props();
11
12	function parseMarkdown(md: string) {
13		let html = md.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
14
15		html = html.replace(/^---$/gm, '<hr class="my-4 border-t border-border" />');
16
17		html = html.replace(/^### (.*$)/gm, '<h3 class="text-lg font-bold mt-4 mb-1">$1</h3>');
18		html = html.replace(/^## (.*$)/gm, '<h2 class="text-xl font-bold mt-5 mb-2">$1</h2>');
19		html = html.replace(/^# (.*$)/gm, '<h1 class="text-2xl font-black mt-6 mb-3">$1</h1>');
20
21		html = html.replace(
22			/^(?:>|&gt;) (.*$)/gm,
23			'<blockquote class="border-l-4 border-primary/30 pl-4 py-1 italic text-muted-foreground my-3">$1</blockquote>'
24		);
25
26		html = html.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
27		html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
28		html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
29		html = html.replace(/__(.*?)__/g, '<strong>$1</strong>');
30		html = html.replace(/_(.*?)_/g, '<em>$1</em>');
31
32		html = html.replace(
33			/\[([^\]]+)\]\(([^)]+)\)/g,
34			'<a href="$2" class="text-primary font-medium underline underline-offset-4 hover:opacity-80 transition-opacity" target="_blank" rel="noopener noreferrer">$1</a>'
35		);
36
37		html = html.replace(
38			/`(.*?)`/g,
39			'<code class="bg-muted px-1.5 py-0.5 rounded text-[0.85em] font-mono border border-border/50">$1</code>'
40		);
41
42		html = html.replace(/^[\*\+-] (.*$)/gm, '<li class="ml-4 list-disc pl-1">$1</li>');
43		html = html.replace(/^\d+\. (.*$)/gm, '<li class="ml-4 list-decimal pl-1">$1</li>');
44
45		const lines = html.split('\n');
46		let processed = [];
47		let inList = false;
48
49		for (let line of lines) {
50			const l = line.trim();
51			const isLi = l.startsWith('<li');
52
53			if (isLi && !inList) {
54				processed.push('<ul class="my-3 space-y-1">');
55				inList = true;
56			} else if (!isLi && inList) {
57				processed.push('</ul>');
58				inList = false;
59			}
60
61			if (
62				l &&
63				!l.startsWith('<h') &&
64				!l.startsWith('<li') &&
65				!l.startsWith('<hr') &&
66				!l.startsWith('<blockquote') &&
67				!l.startsWith('<ul') &&
68				!l.startsWith('</ul')
69			) {
70				processed.push(`<p class="mb-3 last:mb-0">${line}</p>`);
71			} else {
72				processed.push(line);
73			}
74		}
75
76		if (inList) processed.push('</ul>');
77
78		return processed.join('\n').trim();
79	}
80
81// … truncated