Katex rehype plugin does not render markdown math

[jelc53]

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

react 18.2.21, node 20.6.2, react-markdown 8.0.7, remark-gfm 3.0.1, remark-math 3.0.1, rehype-katex 5.0.0

Link to runnable example

No response

Steps to reproduce

Install packages npm install react-markdown remark-math rehype-katex katex.

And import 'katex/dist/katex.min.css'; to page.tsx.

Write component for markdown rendering:

import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

function MyComponent({ content }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeKatex]}
      children={content}
    />
  );
}

Finally, write page.tsx:

  const markdownContent = `
  This is inline math: $e = mc^2$.

  This is block math:

  $$
  \frac{-b \pm \sqrt{b^2-4ac}}{2a}
  $$
  `;

  return <MyComponent content={markdownContent} />;
}

Expected behavior

Expect math to be rendered without $$ and $ still visible everywhere.

Actual behavior

Math not rendered properly. Instead just read the latex as raw text with $ etc.

Runtime

Node v17

Package manager

npm 8

OS

Linux

Build and bundle tools

Next.js

[wooorm]

You are typing in a template literal. \f in a string in JS means whitespace. Escape you \s.
Otherwise, the CSS maybe doesn’t load? Inspect the DOM. Share what you find.

[jelc53]

I switched to rehype mathjax and it worked fine so think the problem is katex related.  Happy to dig into deeper next week. Was a bit under the pump at work this week.

[wooorm]

What is “fine”. It shouldn’t work fine either, with your code it should instead crash. Or you have different code, and likely don’t have CSS?

[CalculusCoder]

You would have to use double slashes \\ when working with template literals and latex, as the first \ is not recognized as latex syntax.
$$ \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a} $$

$$ \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$