Why the formulas show twice? one in tex output format, one in text.

[cmal]

generated html:

<div><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><mo>∗</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E = m * c ^ 2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal" style="margin-right:0.05764em;">E</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.4653em;"></span><span class="mord mathnormal">m</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">∗</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:0.8641em;"></span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span></div>

were rendered in both katex-mathml and katex-html format.

There is the same error(show twice) when using or not using remark-mdx-math-enhanced.

import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import remarkMdxEnhanced from 'remark-mdx-math-enhanced'

const mdxOptions = {
  // See https://mdxjs.com/advanced/plugins
  remarkPlugins: [
    // E.g. `remark-frontmatter`
    remarkMath, [remarkMdxEnhanced, { component: 'Math' }]
  ],
  rehypePlugins: [
//    rehypeKatex
  ],
}

[wooorm]

https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex#css

[x-at-01]

Hi! The reason the formulas show twice is that by default, rehype-katex / rehype-mathjax outputs both the MathML and HTML representations for compatibility, relying on client-side KaTeX CSS to hide the extra one. If the CSS isn't loaded correctly (or in RSS feeds/certain environments where external CSS is blocked), both are displayed.

A very clean way to solve this without needing to load any client-side CSS is to compile LaTeX formulas directly to browser-native MathML Core (<math> tags) only.

Since all modern browsers natively support MathML Core now, you don't need any client-side CSS or layout JS. It outputs a single standard HTML element which displays correctly everywhere, including in RSS readers and static pages.

I wrote @webc.site/math (GitHub: https://github.com/webc-site/math) — a 3.5KB zero-dependency compiler, and its remark plugin @webc.site/math-remark (NPM: https://www.npmjs.com/package/@webc.site/math-remark). It renders clean native MathML tags at compile time, eliminating the double-rendering bug and CSS requirement.

Demo: https://math.webc.site