使用react.js动态mathjax

Question

I tried to combine the markdown example on the react.js page and tried to have it render equations with mathjax. ( jsFiddle )

Ideally it would take in an input

 Type some *markd**o**wn* here! $$ int $$

and return the integral sign

Type some markd o wn here! ∫

The react.js code is taken directly from Facebook's page. I hope I called MathJax.Hub.Queue in the correct place -- their docs have a discussion of dynamic MathJax :

/** @jsx React.DOM */

var converter = new Showdown.converter();

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Type some *markdown* here! \\\( \int \\\)'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    console.log(this.state.value);
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          id="input"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          id="output"
          dangerouslySetInnerHTML={{
            __html: converter.makeHtml(this.state.value)
          }}
        />
      </div>
    );
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"output"]);
  }
});

React.renderComponent(<MarkdownEditor />,  document.getElementById('content'))

There is a similar example on the MathJax page that handles equations but not markdown.

Answer 1

Your placement of the MathJax.Hub.Queue function is incorrect. Note that it follows the return statement, so it never gets performed (since the function returns before getting to it). The documentation for the render() method of the React.js documentation suggests that it should not modify the DOM, so you don't want to do the typeset at this point anyway. And since you are returning the HTML string, it hasn't been added to the DOM yet anyway, so it would not be there for MathJax to process anyway. The documentation suggests that componentDidMount() and componentDidUpdate() are the places where you should have MathJax typeset the new mathematical content.

I've adjusted your jsFiddle example to include the changes.

Note also that Markdown is going to interact with your backslashes, so it removes the ones for the math delimiters \\(...\\) and you just get (...) , so MathJa won't see them. I've reconfigured MathJax using MathJax.Hub.Config() to use dollar sign delimiters $...$ for in-line math (and the default $$...$$ for displayed math). Otherwise you will need to type \\\\(...\\\\) to get the backslashes into the Markdown output where MathJax can see them (and \\\\\\\\( \\int \\\\\\\\) in your initial string). You can, of course, configure MathJax to use whatever delimiters you want, but dollars are the plain TeX approach.