Syntax highlighting works locally but breaks in deployed site on Vercel

[hughess]

We use the Highlight component in our website which is deployed on Vercel. The syntax highlighting will work locally, but will not work once deployed to Vercel. The line numbers and code styling continue to work, just the syntax colours are not applied at all.

When I look in devtools locally, I see each portion of the code split into tags to apply the colours, whereas in the Vercel deployment I only see one tag per line of code, without any colour applied.

We are using the Vercel adapter.

<Highlight language={markdown} {code} let:highlighted>
  <LineNumbers {highlighted} hideBorder {wrapLines}
      --line-number-color="rgb(226 232 240)"
      />
</Highlight>

[Snailedlt]

I'm having similar issues with my app: https://markdown-videos.jorgenkh.no/ The preview build locally also doesn't apply highlighting for HTML.... markdown works fine though.

My code highlighter looks like this:

<script lang="ts">
  import Highlight from 'svelte-highlight';
  import type { LanguageType } from 'svelte-highlight/languages';
  import atomOneDark from 'svelte-highlight/styles/atom-one-dark';

  export let code: string;
  export let language: LanguageType<string>;
  export let style = atomOneDark;
</script>

<svelte:head>
  {@html style}
</svelte:head>

<Highlight {language} {code} />

In case you want to look at more of the code, my project is open-sourced here The relevant code can be found inside apps/web/src/lib

This is how it looks:

Production

Local preview

Local dev

related to https://github.com/Snailedlt/Markdown-Videos/issues/131

[MordechaiHadad]

Having the same issue with https://github.com/MordechaiHadad/svelte-complete

[shinokada]

Highlight didn't work for me either but HighlightSvelte works for me. HighlightSvelte works on Svelte 5. https://svelte-5-ui-lib.vercel.app/components/button