https://www.mathjax.org/cdn-shutting-down/

And:
https://www.npmjs.com/package/react-mathjax
samypesse published 7 months ago

Hi, I have a react program set up with a MathJax node hooked up to some sliders, like this:

When I move these sliders, multiple MathJax nodes appear:

I will also note that using this react-mathjax library solves this problem: https://github.com/wko27/react-mathjax (registered as react-mathjax2 in npm).

i need to change font-family in mathjax how it change

I am trying to render ascii math in my react component,
const mathOptions = { AsciiMath: { useMathMLspacing: true }, tex2jax: { inlineMath: [ ['$', '$'], ['\\(', '\\)'] ] }, "HTML-CSS": { linebreaks: { automatic: true } }, extensions: ['asciimath2jax.js'], jax: ['input/TeX', 'input/AsciiMath', 'output/HTML-CSS'] }; const mathScript = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"; const mathContent = 'sum_(i=1)\\^n i=(n(n+1))\/2'; itemMarkup = <MathJax.Context options={mathOptions} script={mathScript}> <MathJax.Node>{mathContent}</MathJax.Node> </MathJax.Context>;
I am expecting it to render like

but, it is rendering like

because, it is rendering like Tex, rather than ascii. If I change
https://github.com/SamyPesse/react-mathjax/blob/master/src/node.js#L121 to
this.script.type = 'math/asciimath; ' + (inline ? '' : 'mode=display');
it works.

is there a way I can pass that config.

Thanks for the wonderful library.

I want to display latex/mathml equations in my react native app. does this component work with react native?

As the warning says when using this library:

Warning: MathJaxNode: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I found out that the Math formula occasionally are not rendering.

The following is what I did

<MathJax.Provider>
    <MathSolutionList />
</MathJax.Provider>

MathSolutionList contains N number of MathSolution that contain latex.

So it looks like something like that essentially the same concept ( consider there could be hundreds of them

<MathJax.Provider>
  <h2>Blah ...</h2>
  <MathJax.Node formula={content.latex[0]} />   // consider the latext are valid
  <p>blah ...</p>
  <MathJax.Node formula={content.latex[1]} />    
  ... 
<MathJax.Provider>

The problem I'm facing now, occasionally it only renders a ;, and the elements show something like this

Any advice will be appreciated.

<MathJax.Provider>
<MathJax.Node formula="%" />
</MathJax.Provider>

Suppose

var text = 25 is $5^2$

and we only want to render 5^2 but we don't know what the text is beforehand. Is this possible?

Mathjax node would render the entire string if we we wrapped it around text.

Does anyone know how to add any extensions(or to config MathJax)?
I believe I should put some config code in Provider.js under defaultProps/options. Currently, I made my own copy of code and add extensions in options. Are there any other ways to add extensions?

Thank you

When a Mathjax element is first rendered, it has an awkward-looking flash where you can see the math but it's not styled.

When rendering some static math content to a page, it seems there is a solution (outlined here: mathjax/MathJax#131). I think it's saying you can hide the Mathjax element until Mathjax has loaded / run or whatever, and then only unhide it when things re ready, so that you don't get the awkward-looking flash of unstyled math.

But with React, if your math content contains any dynamic value, then you don't just render the Mathjax element once. You render it every time the value changes. This means the above-described solution doesn't work, and you get the awkward-looking flash many many times (depending on how often the data changes, but that could be a ton if a user is modifying relevant things.)

Wondering if there is an analogous solution for react-mathjax, or if anyone else has had this issue and has a good way to handle it.

See https://www.mathjax.org/cdn-shutting-down/ for more details on migrating to another CDN service.

MathJax.Provider calls this.load() only in componentDidMount and componentDidUpdate.
load() then loads Mathax if this.hasNodes is true, which in turn is set when a node calls the registerNode function it receives from the context. The hasNodes is stored on the Mathax.Provider instance itself, rather than the state, so setting it doesn't cause componentDidUpdate to be called, so at least one component needs to be registered before componentDidMount is called.

So I propose making hasNodes part of the state, and will submit a PR to do just that. Let me know if I'm misunderstanding anything.

As the warning message says when you use this library:

warning.js:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I don't see why you'd need these in production, I'm gonna start working on a pull for this.

let tex = '12\\enclose{longdiv}{48}'
  return (
    <Box sx={{ minWidth: 200, fontSize: 30, color: 'white' }}>
      <MathJax.Provider>
        <MathJax.Node
          formula={he.decode(tex)}
        />
      </MathJax.Provider>
    </Box>
  );

this displays incorrectly.

I tried to set custom options like

tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }

but nothing happened.
I tried to change DEFAULT_OPTIONS inside component, but nothing happened too. Then I completely removed const { options } = this.props; MathJax.Hub.Config(options); and it had no impact on the component.

I want to enter MathML code and have it rendered. I tried to change configuration as described in MathJax website in order to use mml2jax, content-mathml.js and mml3.js however it didn't work. Is it possible to enter MathML instead of TeX?