Vector accents, `\vec`, do not render when using KaTeX

[Thiti517]

Context

No response

Bug description

I am using KaTeX for math rendering in Material for MkDocs. Most formulas render correctly (sums, products, fractions, greek letters, ...).

However, vector accents do not appear at all, for example when using \vec{F}.

Additional Verification

Rendering the exact same formula in a standalone HTML page using only KaTeX does show the vectors correctly, so the issue appears to not be browser related.

This suggests that some of Material CSS could be preventing KaTeX from rendering accurately.

Related links

• Reporting a bug
• Documentation -> Math -> KaTeX

Reproduction

9.6.23-katex-vectorial-arrows-are-not-rendering.zip

Steps to reproduce

1. Install MkDocs and Material for MkDocs.

2. Create a new MkDocs project and configure theme -> name: material in mkdocs.yml.

3. Enable KaTeX following the Material for MkDocs math reference guide.

4. Add a formula using vector accents, for example:

   $$
   \vec{F}_T = \sum_{i=1}^{N} \vec{F}_i = m \vec{a}
   $$
   

5. Run mkdocs serve or mkdocs build.

6. Observe that the vector arrows do not appear in the rendered output.

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting! It's impossible that Material for MkDocs is responsible for this, since MathJax and KaTeX are added via additional JavaScript. Here's a reproduction that shows the same issue for the default mkdocs theme: repro.zip

Thus, the problem must either lie in Python Markdown Extensions, or in KaTeX itself. Closing as upstream issue.

[facelessuser]

@squidfunk it is not impossible as this could be a styling issue.

I found that disabling max-width fixed for KaTeX content fixed the issue:

.md-typeset img, .md-typeset svg, .md-typeset video {
    height: auto;
    /* max-width: 100%; */
}

It may be that an exception is required for KaTeX content. At the very least a user could override and clear max-width for svg under KaTex.

[facelessuser]

A potential override that may be sufficient might look like:

.katex-html svg {
  max-width: revert;
}

I haven't done extensive testing on this, as I usually use MathJax instead of KaTeX, but it is a good starting point for anyone looking to solve this issue.

[Thiti517]

A potential override that may be sufficient might look like:

.katex-html svg {
max-width: revert;
}

I haven't done extensive testing on this, as I usually use MathJax instead of KaTeX, but it is a good starting point for anyone looking to solve this issue.

This solution seem to do the trick for me !

[squidfunk]

So, my apologies – I actually misunderstood what the problem was, and the MkDocs theme in fact does not expose this behavior 🤦‍♂️ The fix suggested by @facelessuser indeed fixes the issue, so I added it in a8b9ace.

Yesterday, we launched Zensical, and I thought I can squeeze triaging this issue in between, but that wasn't a good idea. Regardless, this can now be considered fixed, and we'll issue a new release in the coming days ☺️

[squidfunk]

Reopening until released.

[Thiti517]

Yesterday, we launched Zensical...

Might be good to note that the same issue occurred with Zensical, and the same solution worked.

[squidfunk]

Perfect, thanks for letting us know! We'll issue a new release on Tuesday.

[squidfunk]

Fixed in 9.7.0!