I am using Rapaheljs for plot creation and in the visual, I have dynamic text element which can have math functions or special chars. In order to get math formatting I am using MathJax, however, it seems post rendering it eats up the equation part. Here is the code -
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false,
tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] }
});
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window.onload = function() {
var paper = new Raphael(document.getElementById('container'), 100, 100);
var text = paper.text( 20, 20, "Hello $a^2 + b^2 = c^2$" );
MathJax.Hub.Queue(['Typeset', MathJax.Hub, text[0]])
};
</script>
</body>
Can someone point out whats the issue? Is there any other way to achieve this or my MathJax configuration is an issue?
