javascript - dynamic mathjax with react.js - Stack Overflow

admin管理员组

文章数量:1430023

I tried to bine 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 markdown 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.

I tried to bine 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 markdown 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.

• javascript
• angularjs
• mathjax
• reactjs

Share Improve this question Follow asked Sep 12, 2013 at 21:47 john mangualjohn mangual 8,1921313 gold badges5858 silver badges9696 bronze badges 1

• Probably you should try KaTeX, which seems much more friendly to React. – Colliot Commented Oct 9, 2016 at 15:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 ponentDidMount() and ponentDidUpdate() 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.

本文标签： javascriptdynamic mathjax with reactjsStack Overflow