Starlight markdown CSS selector messes with Latex/Katex square roots.

[gbmhunter]

What version of starlight are you using?

0.28.3

What version of astro are you using?

4.15.12

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

The Starlight CSS rule:

.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
    display: block;
    max-width: 100%;
    height: auto;
}

hides Katex (one of the most popular ways of displaying Latex on a webpage) square root symbols.

This is because Katex uses an svg to render the square root symbol, and the height: auto makes it invisible. One fix is to add this rule to custom.css:

/**
This CSS fixes issue where \sqrt{} was not being rendered in Katex, due to a Starlight Css svg height rule
*/
.katex-html svg {
  height: inherit;
}

Katex does not give you the ability to add the .not-content class to the parent equation containers, that would have been my first choice for a fix. Perhaps this selector can be modified in Starlight to avoid Katex?

Link to Minimal Reproducible Example

https://blog.mbedded.ninja/test/

Participation

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

[delucis]

Thank you for the issue @gbmhunter. I needed to do something similar for a MathJax example which incudes this custom CSS:

/* Display SVGs generated by MathJax inline, overriding Starlight’s default `display: block` style for images. */
mjx-container svg {
  display: inline !important;
}

I’m not sure if there’s a good out-of-the-box approach we can take. Both MathJax and Katex are custom features, so it feels wrong to add styles to handle them when many sites don’t use them. And on the other hand the existing styles are designed to make a simple ![](./diagram.svg) dropped in a Markdown file work as expected.

Do you have any ideas on how best to handle this?

[delucis]

Going to close this for now as I don’t think it’s necessarily unreasonable to expect some custom markup solutions to also require some custom styles. Although happy to revisit if we have some further ideas about how to approach this.

I’ll also note that eventually styling will be even easier with #2322 removing the need for !important in style declarations.

Thanks again for the issue @gbmhunter!

[gbmhunter]

No worries, if anything this issue will serve as a good tutorial on how to fix it for other people (if search engines pick it up).

Thanks for the great work you put into astro.js! Love the framework :-)