latex parsing needed

[samuel-1184]

Thanks for the great component!

It seems that both inline and block latex equations are not supported as for now. For example, it would be ideal for

$$f(X,n) = X_n + X_{n-1}$$

in markdown to be parsed as a special element so that we can further overwrite the component by katex.js etc. to get the final result as follows:

$$f(X,n) = X_n + X_{n-1}$$

Please refer to https://ashki23.github.io/markdown-latex.html for more examples. This feature is critical to handle markdown for math, computer science, machine learning etc. Thanks in advance.

[quantizor]

Open to PRs if you can implement it in a lightweight fashion

[quantizor]

to be parsed as a special element

are you thinking just a separate category that you can apply an override to? Is there a suitable semantic HTML element container?

[quantizor]

Spent some time looking at this, I think the most straightforward way to handle it is to leverage the existing fenced code block grammar and perhaps add an option to customize the wrapper things are placed in and a function to invoke after rendering.

For example, it could look like this in markdown:

```latex
$$f(X,n) = X_n + X_{n-1}$$
``​`

the wrapper things are placed in

This matters because many of the utilities for parsing LaTeX I looked at will automatically ignore <code> elements.

a function to invoke after rendering

This would probably also be useful for syntax highlighters, often they struggle to know when they need to reparse the document.

[Marviel]

@quantizor that makes sense to me!

[Marviel]

If you want a hack that will work in the meantime:

1. Install react-katex
2. Here's how to use it with Markdown to JSX

import "katex/dist/katex.min.css";
import {InlineMath} from "react-katex";
import Markdown from 'markdown-to-jsx'


// Change this to whatever you want,
// Just make sure that wherever you want latex to appear, you use this.
// You could, for instance, write a script to turn any pair of `$$` statements into the correct
// enclosing tags, as that is a common way to denote "latex starts here"
const NAME_OF_LATEX_TAG = "latex"

// Make sure your latex has double-backslashes!!
// If you don't double-up on the backslashes, sometimes formatting gets lost...
const mdStringWithLatex = `
# Regular Markdown
*italics* **bold**

# Latex
<${NAME_OF_LATEX_TAG}>\\\\sqrt{a^2 + b^2}</${NAME_OF_LATEX_TAG}>
`

const renderComponent = () => {   
   <Markdown
    options={{
      overrides: {
         // Here's where we tell Markdown-To-JSX to ignore whatever is in the tag,
         // and replace it with our own component.
         // In this case we're replacing it with <InlineMath> from `react-katex`,
         // But you can use whatever react component you'd like.
         [NAME_OF_LATEX_TAG]: (props: any) => {
          // Hacky, doesn't support multiline children
          const childstr = props.children[0] as string
    
          return <InlineMath math={childstr}/>
        }
      },
    }}
  >
    {mdStringWithLatex}
  </Markdown>
}