Vector arrow not shown in astro starlight project

[obiscr]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

rehype-katex(7.0.1) / remark-math(6.0.0)

Link to runnable example

https://codesandbox.io/p/devbox/2k43df

Steps to reproduce

Just open ths sandbox, and you will see it.

Expected behavior

The vector arrow can be displayed normally, like this

Actual behavior

The arrow not shown

Affected runtime and version

v18.20.0

Affected package manager and version

[email protected]

Affected OS and version

macOS 13.6.7

Build and bundle tools

No response

Additional

I found the latex is showing in this tag

<span class="accent-body" style="left:-0.1522em;">
</span>

I found this classes, which has the default style

element.style {
    left: -0.1522em;
}

.katex .accent .accent-body:not(.accent-full) {
    width: 0;
}

.katex .accent .accent-body {
    position: relative;
}

.katex .vlist>span>span {
    display: inline-block;
}

.katex * {
    -ms-high-contrast-adjust: none !important;
    border-color: currentColor;
}

I found that once I used the following custom style to rewrote the default style, the arrows were displayed correctly

.katex .accent .accent-body:not(.accent-full) {
    width: 9px !important;
}

.katex .accent .accent-body {
    left: 0 !important;
}

I hope this information is useful

[wooorm]

Hi!

Knowing that CSS solves it, can lead to a solution: do not use old CSS. Use the current, modern CSS. You are at 16.9, KaTeX is at 16.11 right now: https://katex.org/docs/browser.

You also do not need to include the client side JavaScript.