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
-
Body
Summary
Make Astro's
<Code/>
component support Shiki'sdefaultColor
option for better control on dual/multiple themes styling.Background & Motivation
By default, Shiki uses CSS'
!important
flag 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!important
ignores cascading.In order to solve this problem, or avoid using
!important
in general, thedefaultColor
option should be set explicitly, as Shiki defaultsdefaultColor
to"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
defaultColor
prop to Astro's<Code/>
component, its value will be passed tohighlighter.codeToHtml()
defaultColor
behave 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 files
directory.Beta Was this translation helpful? Give feedback.
All reactions