Katex rehype plugin does not render markdown math

[jelc53]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] 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} $$

[liukkm]

At present, GPT4 will not return the mathematical formula beginning and ending with '$$', and katex cannot work normally at this time. What should I do?

[wooorm]

make a repro

[github-actions[bot]]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing a reproduction: It’s not yet clear whether this is a problem. Here are a couple tips:

• Thoroughly document how to reproduce the problem, in steps or with code
• Don’t link to your complete project: make the repro as tiny as possible, preferrably with only the problematic project in question
• Make sure you’re on the latest versions of projects (and node/npm/yarn!)
• The best issue report is a failing test proving it

Thanks, — bb

[liukkm]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing a reproduction: It’s not yet clear whether this is a problem. Here are a couple tips:

• Thoroughly document how to reproduce the problem, in steps or with code
• Don’t link to your complete project: make the repro as tiny as possible, preferrably with only the problematic project in question
• Make sure you’re on the latest versions of projects (and node/npm/yarn!)
• The best issue report is a failing test proving it

Thanks, — bb

Like the markdown text described below (returned by gpt4o), the mathematical formula is not surrounded by $$, which causes the mathematical formula to not render correctly

markdown:

Overview of Lorentz Transformation

1. Time transformation: [ t' = \gamma \left( t - \frac{vx}{c^2} \right) ]

2. Spatial transformation: [ x' = \gamma (x - vt) ] [ y' = y ] [ z' = z ]

Where (\gamma) is the Lorentz factor, defined as: [ \gamma = \frac{1}{\sqrt{1 - \frac{v^2}{c^2}}} ]

My react-markdown reference code looks like this

function _MarkDownContent(props: { content: string }) {
  const [setDefaultContent] = useChatStore((state) => [
    state.setDefaultContent,
  ]);
  // const [showImage, setShowImage] = useState(false)
  // const [imageSrc, setImageSrc] = useState('')
  return (
    <>
      {/*  RehypeRaw 解析HTML*/}
      <ReactMarkdown
        remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
        rehypePlugins={[
          RehypeKatex as any, // 解析HTML中的数学类，例如开平方根或者求最值
          [
            RehypeHighlight,
            {
              detect: false,
              ignoreMissing: true,
            },
          ],
        ]}
      >
        {props.content}
      </ReactMarkdown>
    </>
  );
}

export const MarkdownContent = React.memo(_MarkDownContent);

[wooorm]

That seems very different from what the person reported here?

the mathematical formula is not surrounded by $$

You have markdown that uses one style of math. This project supports a different style of math. There is no standard for math in markdown.

What should I do?

No clue. This project doesn’t do, or attempt to do, what you want.

[wooorm]

Closing this. OP was unclear what problem they had (like about how escapes work in JavaScript?), so I left it open for them to clarify. Now everyone is sharing all their different potential problems here. Please use different issues for your different problems.

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.