SVHighlight width spans outside of parent container

[arkmech]

I have looked in Chrome Dev Tools and cannot determine what is causing the SVHighlight to span outside of div.

I do not want to set a max width, but more of width 100% within its parent container.

The area outside the gray is outside the parent.

[bennymi]

Hi @arkmech, can you provide a reproduction for it or a code snippet so I can see how you are implementing the code block?

[bennymi]

Btw this library hasn't been updated in quite a long time and there are now some better solutions than highlight.js, so you might consider trying out shiki instead. It also shouldn't be too difficult to set up.

[arkmech]

Hi @arkmech, can you provide a reproduction for it or a code snippet so I can see how you are implementing the code block?

<script lang='ts'>
  import { CodeBlock } from 'svhighlight';

  interface CodeSnippetProps {
    code?: string
  }
  let { code, }: CodeSnippetProps = $props();
</script>

{#if code}
  <CodeBlock 
    language="svelte"
    {code}
    headerClasses="bg-secondary dark:bg-secondary-dark border-b border-secondary dark:border-secondary-dark font-semibold text-sm text-primary dark:text-primary-dark [&>button]:text-secondary dark:[&>a]:text-secondary-dark hover:[&>button]:text-secondary-hover dark:hover:[&>a]:text-secondary-hover-dark"
    background="bg-transparent border border-secondary dark:border-secondary-dark"
    codeTextClasses="text-utility-gray-700"
    lineNumberTextClasses='bg-secondary dark:bg-secondary-dark text-quarterary dark:text-quarterary-dark border-r'
  />
{/if}

[arkmech]

Btw this library hasn't been updated in quite a long time and there are now some better solutions than highlight.js, so you might consider trying out shiki instead. It also shouldn't be too difficult to set up.

Yeah, didn't look at commit history. But yeah how I style was just copying highlight.js style and modifying the colors of one theme.