attpslabs.com
forked from
baileytownsend.dev/pds-dash-fork
A fork of selfhosted.social for self.surf
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import { codeToHtml } from 'shiki';
4
5 interface Props {
6 code: string;
7 lang?: string;
8 }
9
10 let { code, lang = 'text' }: Props = $props();
11
12 let html = $state('');
13
14 onMount(async () => {
15 const result = await codeToHtml(code, {
16 lang,
17 theme: 'github-dark'
18 });
19 // Extract just the inner code content from Shiki's output
20 // Shiki wraps in <pre><code>...</code></pre>, we only want the inner spans
21 const match = result.match(/<code[^>]*>([\s\S]*?)<\/code>/);
22 html = match ? match[1] : code;
23 });
24</script>
25
26{#if html}
27 <code class="inline-shiki">{@html html}</code>
28{:else}
29 <code>{code}</code>
30{/if}
31
32<style>
33 .inline-shiki {
34 background-color: rgba(255, 255, 255, 0.1);
35 padding: 0.15rem 0.4rem;
36 border-radius: 4px;
37 font-size: 0.9em;
38 }
39
40 .inline-shiki :global(span) {
41 font-size: inherit;
42 line-height: inherit;
43 }
44</style>