// utils/HighlightCompo.svelte

<script lang="ts">
  import { HighlightSvelte, Highlight } from 'svelte-rune-highlight';
  // check colorscheme at https://highlightjs.org/demo
  import githubDark from 'highlight.js/styles/github-dark';
  import markdown from 'highlight.js/lib/languages/markdown';
  let { code, codeLang }: { code: string; codeLang?: string } = $props();
</script>

<div class="mx-auto my-8 max-w-4xl rounded-md border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-600 dark:bg-gray-700">
  {#if codeLang === 'md'}
    <Highlight language={markdown} {code} />
  {:else if code}
    <HighlightSvelte {code} />
  {:else}
    no code is provided
  {/if}
</div>
