fast-reflexes/better-react-mathjax

Question - Render HTML with AsciiMath

jin-syd opened this issue · 4 comments

jin-syd commented

Hi,

I have a question to handle my issue.

I have to render HTML with AscIIMath.
HTML is created using CKEditor 4 with Mathematical Formulas.
For example it generates HTML like:

<p> Hello
     <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span></p>
</p>

To render this HTML with AscIIMath, I tried to do like below:

  1. Insert it into index.html
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  2. call a component like
const HtmlContent = ({ htmlContent }) => {
return (
  <div
    dangerouslySetInnerHTML={{ __html: htmlContent }}
  />
);
};

And as you know, it does not work. Is there any way to handle it with 'better-react-mathjax' component?

Thanks for your advice in advance.
Jin

fast-reflexes commented

No matter if you use better-react-mathjax or not, the delimiters you use are not the standard delimiters used by MathJax for AsciiMath (https://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-delimiters) which means you must supply a configuration to let MathJax know which delimiters you are using. You must also load the AsciiMath support as described here: https://docs.mathjax.org/en/latest/input/asciimath.html#loading-the-asciimath-component.

Here you can read about how to configure MathJax the usual way: https://docs.mathjax.org/en/latest/options/index.html (remember to put the configuration above the import of MathJax)

If you are working in React, you can use better-react-mathjax, in which case there are several examples and sandboxes, describing how to do it in the documentation README for this project.

jin-chong commented

Thanks for your fast reply.

And sorry there was wrong information in my question. It was not AscIIMath, it is Tex.

Could you please point to any example about how to render pure HTML block with Tex codes inside React component?
I cannot find any clue from README

jin-chong commented

Much appreciated!
Have a good day!

  • 👍1