Support Shiki's defaultColor option in Astro's <Code/> component
#897
ARipeAppleByYoursTruly
started this conversation in
Proposal
Replies: 3 comments 3 replies
-
|
Bumping for visibility as this got stale |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
There's also an issue opened in Astro respectively withastro/astro#11238, but that's for the Definitely welcome a PR though. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I'll try making a PR after withastro/astro#11238's PR have been merged, thanks for the green light |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Body
Summary
Make Astro's
<Code/>component support Shiki'sdefaultColoroption for better control on dual/multiple themes styling.Background & Motivation
By default, Shiki uses CSS'
!importantflag to override the default theme's styles to another. This approach introduces a problem when the user wants to "reverse" the default theme, ie. apply dark theme as default, as!importantignores cascading.In order to solve this problem, or avoid using
!importantin general, thedefaultColoroption should be set explicitly, as Shiki defaultsdefaultColorto"light", detailed in Shiki docs. But Astro's<Code/>component doesn't exposedefaultColor, and so here we are.I'm aware that Expressive Code has solved this problem, but it would be nice to give the user another option to work with.
Goals
defaultColorprop to Astro's<Code/>component, its value will be passed tohighlighter.codeToHtml()defaultColorbehave like Shiki's for consistencyExample
I've tried implementing it and seems successful in this repo. Changes I've made are in the
node_modules - modified filesdirectory.Beta Was this translation helpful? Give feedback.
All reactions