Ship reusable Markdown styles

[HiDeoo]

What version of starlight are you using?

0.11.1

What is your idea?

Extract the styles of <MarkdownContent/> and expose them through a regular CSS file, e.g. markdown.css, that can be imported by users.

Why is this feature necessary?

This discussion is a follow-up of #861.

When rendering a custom UI using components, component overrides or injected routes using injectRoute(), some specific portions of it could be Markdown, e.g. a blog post excerpt, a description of an API endpoint, etc.
After rendering this Markdown, the most common expectation is to get the same styles as Markdown in Starlight.

You can import <MarkdownContent/> and wrap your Markdown content with it but this is not ideal as this component expects the standard component props which can be annoying to pass down just to get some CSS styles.

Having a separate CSS file that can be imported by users in their components would be a simpler solution.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Sounds good. One thing we'll need to think about is scoping — currently the styles are scoped to the .content wrapper using Astro's scoped styles.

We'll lose the encapsulation by moving to an external CSS file, so should probably choose a class name in line with our utility classes, something like sl-markdown-content.

[delucis]

Done in #1049! Will be released in v0.12.1 — thanks again for proposing and working on this @HiDeoo 💜