markdown color syntax with a service worker

[gabrielatwell1987]

🏷️ Discussion Type

Question

Body

i have a pwa project that uses markdown code fences. right now, the code blocks have a background color and the color of the text. I want to have syntax highlighting for the code blocks.

i've tried shiki and highlight.js and they both work in dev mode, but when i deploy the page gets loaded with no css. when i look in the terminal it says in red: [404] GET '/learn/service-worker.ts'. this happens on both.

this project is built with sveltekit, and i've tried to use these installs in SSR mode and the same thing happens. i'm not great at making the pwa, i used ai.

the markdown page: https://gabrielatwell.com/learn/po
there's a github link on the footer to see my service worker.

---

if i'm not supposed to be asking/posting this here, i apologize. i don't know where to go. i've been trying to get color syntax for a week

Guidelines

• I have read and understood this category's guidelines before making this post.

[yegost]

From what you described, there are two separate issues overlapping:

1. The [404] GET '/learn/service-worker.ts' error:

This is the bigger problem and likely why your CSS disappears in production.
In a SvelteKit PWA, the browser cannot load .ts files directly. Your service worker must be built to JavaScript and served from the correct location.

What’s probably happening:
Your app is trying to register:

Promise.resolve()

But in production, that file doesn’t exist -> 404 -> service worker fails -> cached assets (like your syntax CSS) never load.

Make sure you're registering the built file, usually something like:

Promise.resolve()

Or if you're using the SvelteKit PWA plugin, let it handle this automatically.

Also check:

• The service worker is in /static or built output
• You're not referencing .ts anywhere in production

2. Syntax highlighting:

Make sure you import a theme globally, e.g. in your root layout:

import 'highlight.js/styles/github-dark.css';

If you don’t import a theme, you’ll get plain text (no colors).

[gabrielatwell1987]

But this only happens when I try to use shiki, prismajs, and also highlight.js. the service-worker.ts works on the rest of the site. when either one of those are installed, the only time I get the [404] is when I try going to the page with the markdown code blocks in dev. in prod when I go to the page the css doesn't load at all. the navigation looks like pure html, no css Sent from [Proton Mail](https://proton.me/mail/home) for iOS.

…

-------- Original Message --------

On Friday, 03/27/26 at 17:30 Alexandru Cazacu ***@***.***> wrote: From what you described, there are two separate issues overlapping: 1. The [404] GET '/learn/service-worker.ts' error: This is the bigger problem and likely why your CSS disappears in production. In a SvelteKit PWA, the browser cannot load .ts files directly. Your service worker must be built to JavaScript and served from the correct location. What’s probably happening: Your app is trying to register: Promise.resolve() But in production, that file doesn’t exist -> 404 -> service worker fails -> cached assets (like your syntax CSS) never load. Make sure you're registering the built file, usually something like: Promise.resolve() Or if you're using the SvelteKit PWA plugin, let it handle this automatically. Also check: - The service worker is in /static or built output - You're not referencing .ts anywhere in production 2. Syntax highlighting: Make sure you import a theme globally, e.g. in your root layout: import 'highlight.js/styles/github-dark.css'; If you don’t import a theme, you’ll get plain text (no colors). — Reply to this email directly, [view it on GitHub](#190906?email_source=notifications&email_token=A5RIPFKN4ZIERFGM32QOXZL4S4MJBA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRTGUYTMNRWUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVRTG633UMVZF6Y3MNFRWW#discussioncomment-16351666), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/A5RIPFJVASDV5FTHTFRL4AD4S4MJBAVCNFSM6AAAAACXCVFXL2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMZVGE3DMNQ). You are receiving this because you authored the thread.Message ID: ***@***.***>

[anshk1234]

Based on your follow-up, this sounds like the syntax highlighting library is triggering a service worker cache poisoning issue specific to that route.

Here's what's likely happening:

When the markdown page loads with a syntax library installed, something about how those libraries load their assets (CSS themes, WASM, worker files) causes the service worker to intercept and cache a broken version of the page — one where the CSS hasn't loaded yet. Every subsequent visit then serves that broken cached version.

Things to try:

1. Clear the service worker cache and hard reload
Open DevTools → Application → Storage → tick everything → "Clear site data". Then reload. If the CSS comes back, the issue is definitely stale cache.

2. Use Shiki with dynamic import + SSR disabled
Shiki uses WASM internally, which can break SSR. In your +page.svelte or markdown processor:

// Use dynamic import to prevent SSR loading
const { codeToHtml } = await import('shiki');

Or in svelte.config.js, make sure the route has SSR disabled if needed.

3. Update your service worker's cache strategy for that route
In your service worker, add a network-first strategy for /learn/* so it doesn't serve a cached broken shell:

registerRoute(
  ({ url }) => url.pathname.startsWith('/learn/'),
  new NetworkFirst()
);

4. Try marked + highlight.js with a static CSS import in +layout.svelte
Instead of importing the CSS inside the markdown component, put it globally:

// src/routes/+layout.svelte
import 'highlight.js/styles/github-dark.css';

This ensures it's bundled with the main CSS chunk and not lazy-loaded per route.

5. Check your vite-plugin-pwa workbox config
If you're using vite-plugin-pwa, make sure syntax-related CSS is included in the globPatterns:

workbox: {
  globPatterns: ['**/*.{js,css,html,wasm}'],
}

The fact that it only breaks on the markdown page strongly points to a route-level caching or WASM/async asset loading conflict with the service worker.

[Rajesh-sahu762]

Markdown me direct color styling supported nahi hoti, lekin HTML tags ya CSS ka use karke text ko color kiya ja sakta hai. Service worker ka role isme caching aur offline support dena hota hai, na ki Markdown styling control karna.
Service workers improve performance by caching rendered Markdown content, but styling is handled separately via HTML and CSS.
Hello World

[Aryan-Gore]

This is likely a service worker path issue, not a problem with Shiki or highlight.js.

The app is trying to load /learn/service-worker.ts, which results in a 404 in production. In SvelteKit, the service worker should be served from the root as /service-worker.js.

Make sure you register it using an absolute path:

Promise.resolve();

Also ensure the service worker is built as .js and not referenced as .ts. This issue can prevent CSS/assets from loading, which is why syntax highlighting disappears in production.

[gabrielatwell1987]

But this only happens on the page that has the markdown code blocks, not on any part of the site. I am pretty sure that sveltekit can still serve service-worker.ts files Sent from [Proton Mail](https://proton.me/mail/home) for iOS.

…

-------- Original Message --------

On Saturday, 03/28/26 at 00:36 Aryan Gore ***@***.***> wrote: This is likely a service worker path issue, not a problem with Shiki or highlight.js. The app is trying to load /learn/service-worker.ts, which results in a 404 in production. In SvelteKit, the service worker should be served from the root as /service-worker.js. Make sure you register it using an absolute path: Promise.resolve(); Also ensure the service worker is built as .js and not referenced as .ts. This issue can prevent CSS/assets from loading, which is why syntax highlighting disappears in production. — Reply to this email directly, [view it on GitHub](#190906?email_source=notifications&email_token=A5RIPFNTCF6UTPSUYWZ3VZT4S56IZA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRTGU2DAMJYUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVRTG633UMVZF6Y3MNFRWW#discussioncomment-16354018), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/A5RIPFL5M6RIHEPZSVL7AJT4S56IZAVCNFSM6AAAAACXCVFXL2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMZVGQYDCOA). You are receiving this because you authored the thread.Message ID: ***@***.***>

[JeevanGowda-AIML]

Hello! The issue you are running into where things work in dev mode but fail in production (404 for /learn/service-worker.ts) is a common hiccup. SvelteKit has built-in service worker support. Instead of linking the service worker manually in your HTML, you should place your file at src/service-worker.ts. SvelteKit will automatically bundle it during the build process and register it correctly in production. For the missing CSS in production: If your syntax highlighting CSS is missing, it is likely because Vite or Tailwind is purging it. Try importing the CSS explicitly in your root +layout.svelte with import "highlight.js/styles/github-dark.css"; Let me know if moving the service worker to the standard location resolves the 404!