#astro.config.mjs doesn't update my shiki config

27 messages · Page 1 of 1 (latest)

gray dagger
#

Hi!! I'm using the <Code> component and I'm trying to change the theme for all the instances.
I'm changing the astro.config.mjs file with no luck. I'm following the documentation but nothing happens. You can check the snapshot.

I also changed the theme property with theme: 'dracula but nothing changes!

What I'm doing wrong? I'm not having any error.

Hope you can help me! thanks a lot!

Ivan

code.png
dry drift
#

I haven't tried using the <Code /> component but I am pretty sure that you need to pass a theme as a prop to change the styling

dusk lily
#

I believe this one https://astro.badg.es/bwa/ is using a non-standard theme without setting it on the components. I'm curious, too 🙃

Astro Badges
Badges

“Built with Astro” SVG badges to add to your sites and GitHub READMEs!

dull stream
dusk lily
#

oh, well, but the method mentioned in the opening post should still be valid? bc I can't get it to work either

idle needle
dull stream
#

I think maybe the shikiConfig option only applies to code blocks in Markdown and MDX files? And <Code> doesn’t use it currently?

#

So with <Code> you need to pass it as a prop. Might seem like a headache, but you can wrap it up in a component for simpler re-use:

---
// src/components/StylishCode.astro
import Code from 'astro/components';
import customTheme from '../styles/blackPanther.json';
---
<Code theme={customTheme} {...Astro.props} />

---
// src/pages/index.astro
import Code from '../components/StylishCode.astro';
---
<Code code="x = 10;\ny = 11;\nconsole.log(x,y)" lang="js" />
idle needle
#

Thanks, that's what I'd like to go with (if I can make it work, because the import is choking as already reported in other threads 🙁). I just wished the default had that.

---
import { Code } from 'astro/components';
import AstroConfig from '../../astro.config.mjs';
---

<Code theme={AstroConfig.markdown.shikiConfig.theme} {...Astro.props} />
gray dagger
gray dagger
dull stream
#

I think you can do something like this ☝️

#

You could also skip the Omit generic if you want to allow overriding theme.

gray dagger
# dull stream ```jsx --- // src/components/StylishCode.astro import Code, { Props as CodeProps...

Hi again!! I'm having the same problem... See the screenshot.

I'm also having problems in styling the code component. The thing is as I'm using the <style> tag in my own component, the styles are not going through my component until arriving to <Code>. I know this is supposed to happen. I fixed it with the is:global directive. But is there a way to do it and not having the styles in global??

Thanks again!!

image.png
dull stream
#

Ah, sorry I misread your original type error! In these cases I’d probably just throw an as any to avoid the type error:

<Code theme={customTheme as any} />
#

Something I do to avoid completely global styles like is:global produces, is to use the :global selector. You’ll need a wrapper element around the <Code /> component for that to work, something like:

<div class="my-code">
  <Code {...Astro.props} theme={customTheme} />
</div>

<style>
  .my-code :global(pre) {
    border: 1px solid blue;
  }
</style>
#

.my-code is scoped to the component as usual but then the selectors inside :global() are not, so you can style the output of <Code /> but only when it’s inside .my-code.

gray dagger
gray dagger
#

Hi again! It all worked as expected, but from my last upgrade of astro the Code component is not using my custom theme anymore. The last version it worked was 1.6.8. From that onwards inside the theme="" attribute I can only use one of the default themes inside shiki module. Do you know what could have happened?

#

Here is my code, also the result before and after. I have no errors showing anywhere...

code.png before.jpg after.jpg
dull stream
#

!issue

tawny lintelBOT
gray dagger
shrewd osprey
#

Totally unrelated to the question, but I love your font