Index.html
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
showProcessingMessages: false,
showMathMenu: false,
showMathMenuMSIE: false,
messageStyle: "none",
tex2jax: {
inlineMath: [
["$", "$"],
["\\(", "\\)"]
]
},
"HTML-CSS": {
linebreaks: {
automatic: true,
width: "container"
},
preferredFont: "qikikFont"
}
});
</script>So here I am trying to load mathjax and in component level I am trying to render a math equation Can anyone please guide me in a correct procedure,I am using Mathjax from winodw ?
export default class Performance extends Component {
componentDidMount() {
window.MathJax.Hub.Config({ //config is undefined
skipStartupTypeset: true,
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [["$", "$"]],
processEscapes: true
}
});
}
renderMath() {
var HUB = window.MathJax.Hub;
HUB.Queue(["Typeset", HUB, "render-me"]);
}
render() {
return (
<p onCllick={this.renderMath}>Performance works</p>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script
id="MathJax-script"
async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"
></script>So I am not supposed to use https://www.npmjs.com/package/mathjax-react and any other npm packages. please refer this code in sandbox https://codesandbox.io/s/silent-monad-98ewn?file=/src/MAthjax.js:1125-1135