Math is broken when using Mkdocs Material theme #6469
Description
Context
No response
Bug description
When I use material theme, equations numbers aren't right aligned, and some equations have vertical scrollbars (see screenshots below). But when I turn off material theme, all works fine. It seems for me that there is something in theme, that make equations broken.
Related links
https://squidfunk.github.io/mkdocs-material/reference/math/
Reproduction
Steps to reproduce
I created some folder, opened this folder in console and typed:
mkdocs new .
mkdocs.yml:
site_name: My Docs
markdown_extensions:
- pymdownx.arithmatex:
generic: true
extra_javascript:
- ./assets/mathjax.js
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.jsdocs/assets/mathjax.js:
window.MathJax = {
tex: {
inlineMath: [ ["\\(","\\)"], ['$', '$'] ],
displayMath: [ ["\\[","\\]"], ['$$', '$$'] ],
tags: 'ams'
},
options: {
ignoreHtmlClass: ".*|",
processHtmlClass: "arithmatex"
}
};docs/test.md:
# Test math
$$
\begin{equation}
f(t) = \mu_1 f_1(t) + \mu_2 f_2(t).
\end{equation}
$$
$$
\begin{align}
p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
$$
$$
\begin{equation}
\begin{aligned}
t_0 &= 0, \\
t_1 &= 1.
\end{aligned}
\end{equation}
$$mkdocs serve
Then I turn on material theme in mkdocs.yml:
site_name: My Docs
theme:
name: material
markdown_extensions:
- pymdownx.arithmatex:
generic: true
extra_javascript:
- ./assets/mathjax.js
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
Browser
Chrome
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.