Basic Math Example Not Working With Block Math

[uuykay]

Hello!

I'm am trying the basic example on React Markdown for ReactMarkdown with 'remark-math' and 'rehype-katex', however while it appears to work with inline math ($) it does not work with block math ($$) or with the blackslash syntax like \fract. Here I have modified the basic example with a different value for children.

Can someone please point me to where I should investigate next? I have tried various other sources which have used "react-katex" in the renderers but this doesn't appear to work (old API?). E.g. https://levelup.gitconnected.com/adding-katex-and-markdown-in-react-7b70694004ef

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you

ReactDom.render(
  <ReactMarkdown
    children={`The lift coefficient ($C_L$) is a dimensionless coefficient.$\frac{r_{test}^3}{T_{test}^2}$`}
    remarkPlugins={[remarkMath]}
    rehypePlugins={[rehypeKatex]}
  />,
  document.body
)

[wooorm]

Can you expand on "doesn't work" means? What is the input markdown, the actual output, and the expected output?

[uuykay]

Thank you for the reply. Sorry I should have been more explicit.

Here is another example:

`$$ \therefore \frac{r_{Drawf}^3}{40,000^2} = \frac{1^3}{1^2} $$`

Expectation (as seen in Visual Studio Code markdown preview)

Actual:

I can partially fix the problem by using an extra backslash like:

$$ \\therefore \\frac{r_{Drawf}^3}{40,000^2} = \\frac{1^3}{1^2} $$

However even in this case, the fraction line is missing for some reason

So I would like to know, why is the fraction line missing, and why do I have to use an extra backslash?

[wooorm]

You have to use extra backslashes because you’re writing markdown in JavaScript. Similar to how you can’t have an escapes do things in javascript strings: '\'' is an apostrophe/single quote, whereas '\' is a syntax error.

And for “block” math, use blank lines around the dollars. This works the same as fenced code:

```this.is.not.shown()
this.code.works()
```

[uuykay]

Noted for the extra backslash.

Do you have any idea for what I need to fix for the fraction horizontal line that seems to be missing in my example?

[wooorm]

You are probably not loading the KaTeX stylesheet.
Here’s an example showing that it works: https://codesandbox.io/s/react-markdown-debug-forked-7kijl?file=/src/App.js

[uuykay]

Thank you for your help. I believe I was importing an old version of the CSS stylesheet when I was trying to get the demo working with react-katex. I installed katex by itself and imported the dist style sheet and the fraction line appears.