Spaces:
Sleeping
Sleeping
File size: 1,077 Bytes
d852bfd 98051f8 7a99944 7fbdda1 d852bfd a1a6daf d852bfd a1a6daf d852bfd 6a0861b 45dbaaf 3d66144 bbf8562 d852bfd 8918d96 d852bfd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script lang="ts">
import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
import DOMPurify from "isomorphic-dompurify";
import hljs from "highlight.js";
interface Props {
code?: string;
lang?: string;
}
let { code = "", lang = "" }: Props = $props();
let highlightedCode = $derived(hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value);
</script>
<div class="group relative my-4 rounded-lg">
<pre
class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
><!-- eslint-disable svelte/no-at-html-tags -->{@html DOMPurify.sanitize(
highlightedCode
)}</code
></pre>
<CopyToClipBoardBtn
classNames="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 dark:text-gray-700 text-gray-200"
value={code}
/>
</div>
|