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 html = await codeToHtml(code.trim(), {
16 lang,
17 theme: 'github-dark'
18 });
19 });
20</script>
21
22{#if html}
23 <div class="code-block">
24 {@html html}
25 </div>
26{:else}
27 <pre><code>{code.trim()}</code></pre>
28{/if}
29
30<style>
31 .code-block :global(pre) {
32 border-radius: 8px;
33 padding: 1rem;
34 overflow-x: auto;
35 margin-bottom: 1.5rem;
36 font-size: 0.85em;
37 line-height: 1.5;
38 }
39
40 .code-block :global(code) {
41 background: none;
42 padding: 0;
43 font-size: inherit;
44 }
45
46 pre {
47 background-color: var(--color-base-300, rgba(0, 0, 0, 0.15));
48 border-radius: 8px;
49 padding: 1rem;
50 overflow-x: auto;
51 margin-bottom: 1.5rem;
52 }
53
54 pre code {
55 background: none;
56 padding: 0;
57 font-size: 0.85em;
58 line-height: 1.5;
59 white-space: pre;
60 }
61</style>