Feature: add note about default color configuration for shiki #8722
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
|
Hello! Thank you for opening your first PR to Astro’s Docs! 🎉 Here’s what will happen next:
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
sarah11918
added
add new content
There was a problem hiding this comment.
Thank you for this contribution @madcampos ! I think people will enjoy having even more control over their highlighting!
I committed an edit just to fit more in with how we're already documenting these Shiki config options, but I'd like you to confirm the sentence I added at the end. I'm assuming that the <Code /> component would just pull from one's config by default, but I realized we don't actually say so.
Looking forward to having you as a member of Team Docs when this feature is released! 🥳
| This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, and [transformers](#transformers) by passing them to the `theme`, `lang`, and `transformers` attributes respectively. | ||
| This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, [transformers](#transformers), and [default color theme](https://shiki.style/guide/dual-themes#without-default-color) by passing them to the `theme`, `lang`, `transformers`, and `defaultColor` attributes respectively. | ||
|
|
||
| By default, this component will use the settings from your [Shiki configuration](/en/guides/markdown-content/#shiki-configuration). |
There was a problem hiding this comment.
Is this true? If so, I think it's helpful to add here!
There was a problem hiding this comment.
I just tested and it seems that the <Code /> component does not inherit any configuration 😕
It think it is worth to point out that to avoid confusion.
There was a problem hiding this comment.
Interesting! So it doesn't even use the theme you've set or anything? I would have assumed that it would! (It's a better story to tell if it does!) I guess it's because it's a Markdown configuration, so it's only relevant when writing code in markdown blocks. I wonder how difficult that would be for us to add....
But yes, if it's not true, we won't say it! Thank you for testing!
There was a problem hiding this comment.
No problem!
I think it would not be so hard to add. One workaround would be to import astro config and then pass the specific part as props to the Code component. Something like this:
On the config file, export the shiki config:
export const shikiConfig = {
//...
};
// All the regular astro config...Then on an astro file import the config and use it to pass props to the code component:
---
import { shikiConfig } from '../astro.config.ts';
---
<Code {...shikiConfig} />
Co-authored-by: Sarah Rainsberger <[email protected]>
|
Thanks @madcampos , this looks great, and I consider the docs ready to go for 4.12, which is scheduled to be released on July 18! |
sarah11918
added
the
Merge Queue
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
!coauthor |
|
Description (required)
Add a note about Shiki's
defaultColoroption that is exposed to Astro on withastro/astro#11341.Related issues & labels (optional)
For Astro version:
4.12. See astro PR #11341.Tagging @sarah11918 for visibility