metonym/svelte-highlight

Syntax highlighting works locally but breaks in deployed site on Vercel

Opened this issue · 5 comments

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>

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

image
image

Local preview

image
image

Local dev

image
image

related to Snailedlt/Markdown-Videos#131

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

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

For some reason this works for me! I had the same issue, rendering thecode with HighlightSvelte fixed it for me in prod.

Thanks @shinokada

For reference, I've added a Vite + Svelte 5 example set-up.