Inline math at arbitrary position in text

[shenkev]

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.

[pyramation]

@shenkev are you saying you'd like to render the entire text string and inline?

@SamyPesse I'm happy to make an example, I found a way to pull this off with your library.

In fact, you don't even need to use the nodes, only the context is required:

const defaultOptions = {
  showProcessingMessages: false,
  messageStyle: 'none',
  showMathMenu: false,
  tex2jax: {
    processEnvironments: true,
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    preview: 'none',
    processEscapes: true
  }
};

class App extends Component {
  render() {
    return (
      <Context options={defaultOptions}>
        <div>
          25 is $5^2$
        </div>
      </Context>
    );
  }
}

[pyramation]

here's a pull request to add to the readme so future users can find how to achieve this: https://github.com/SamyPesse/react-mathjax/pull/12

[pyramation]

@SamyPesse is there a way to support this original issue? I noticed you have to create all of the inline nodes, when it's not necessary as MathJax with parse text + tex as in this example.

I personally don't want to use the MathJax.Node, I think it's too granular to type for every equation, as it defeats the purpose of writing LaTeX. Is there a way to make something like this MathJax.Context example work?