withastro/astro

Shiki Theme Changes Not Reflected in Content Collection

Opened this issue · 5 comments

kirawat commented

Astro Info

Astro                    v5.0.3
Node                     v22.12.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When changing the theme value within shikiConfig in the astro.config.mjs file, the Shiki theme updates correctly and instantly on Pages. However, the theme does not change for code blocks in posts generated from the Content Collection. Additionally, hot reload stops functioning for the Content Collection after modifying astro.config.mjs.

To Reproduce

  1. Create an Astro project with at least one Markdown post in the src/content directory.

  2. Add a code block to both a Page and a Markdown post.

  3. Configure Shiki in astro:config:mjs:

    export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-dark', // Initially set to 'github-dark'
    },
  },
});

  4. Start the development server (astro dev).

  5. Observe that the code blocks on both the Pages and the post use the github-dark theme.

  6. Change the theme value in astro.config.mjs to a different theme (e.g., github-light).

  7. Observe that the theme updates on the Page but not on the post.

  8. Make a change to the Markdown content of the post and save. Observe that hot reload does not reflect the changes.

What's the expected result?

The Shiki theme should update instantly on both Pages and Content Collection posts when the theme value in astro.config.mjs is changed. Hot reload should continue to function correctly for the Content Collection after modifying astro.config.mjs.

Workaround

Deleting the data-store.json file from the .astro directory and restarting the development server temporarily resolves the issue. Shiki themes then change correctly on all content, and hot reload functionality is restored.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-k8fzhwqy

Participation

  • I am willing to submit a pull request for this issue.
pdlug commented

I can confirm this is a problem, got bit by it today.

ematipico commented

Can you use the --force CLI option as a workaround?

cworld1 commented

I thought Astro will not plan to provide deep integration with Shiki. Don't realize it was a bug at all :(

kirawat commented

Can you use the --force CLI option as a workaround?

Yes. Stop dev server and then run npm run astro dev --force after changed the theme in astro.config.mjs does successfully clear the content layer cache and forced a full rebuild.

Just have to do it every time when changes the theme in astro.config.mjs file.

pdlug commented

It's also misleading behavior, either needs to be fixed or noted in the docs.