Last active
October 7, 2023 18:32
-
-
Save mcleonard/0433c1eca1d56489259118524824f159 to your computer and use it in GitHub Desktop.
Render math expressions in Markdown with Mathjax as a React component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import ReactMarkdown from 'react-markdown'; | |
import MathJax from 'react-mathjax'; | |
import RemarkMathPlugin from 'remark-math'; | |
function MarkdownRender(props) { | |
const newProps = { | |
...props, | |
plugins: [ | |
RemarkMathPlugin, | |
], | |
renderers: { | |
...props.renderers, | |
math: (props) => | |
<MathJax.Node formula={props.value} />, | |
inlineMath: (props) => | |
<MathJax.Node inline formula={props.value} /> | |
} | |
}; | |
return ( | |
<MathJax.Provider input="tex"> | |
<ReactMarkdown {...newProps} /> | |
</MathJax.Provider> | |
); | |
} | |
export default MarkdownRender |
@CNFeffery I don't know, sorry :(
maybe limiting the fonts that get imported? I don't know if that works tho
This combination is not working for me: react-markdown, remark-math, rehype-katex. I'm running react-markdown version 8.0.7
Keep getting errors related to type of katex: "Type 'Plugin<[(KatexOptions | undefined)?]>' is not assignable to type 'Pluggable<any[]>'"
Any ideas?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@saverioscagnoli after import
katex/dist/katex.min.css
, the webpack bundle size turn to very large😬, is there a good way to optimize?