1

我尝试在react.js页面上结合 markdown 示例，并尝试让它使用 mathjax 渲染方程式。( jsFiddle )

理想情况下，它会接受一个输入

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

并返回积分符号

在这里输入一些标记！∫</p>

react.js 代码直接取自 Facebook 的页面。我希望我MathJax.Hub.Queue在正确的地方打电话——他们的文档讨论了动态 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'))

MathJax页面上有一个类似的示例，它处理方程式但不处理降价。

4

1 回答 1

4

MathJax.Hub.Queue您对函数的放置不正确。请注意，它在return语句之后，因此它永远不会被执行（因为函数在到达之前返回）。React.js文档的render()方法的文档建议它不应该修改 DOM，所以无论如何你都不想在这一点上进行排版。而且由于您要返回 HTML 字符串，因此它还没有被添加到 DOM 中，因此 MathJax 无论如何都不会处理它。文档建议并且是您应该让 MathJax 排版新数学内容的地方。componentDidMount()componentDidUpdate()

我已经调整了您的jsFiddle 示例以包含更改。

另请注意，Markdown 将与您的反斜杠交互，因此它会删除数学分隔符的那些，\(...\)而您只会得到(...)，因此 MathJa 不会看到它们。我重新配置了 MathJax MathJax.Hub.Config()，使用美元符号分隔符进行内联数学（以及显示数学$...$的默认值）。$$...$$否则，您将需要键入\\(...\\)以将反斜杠输入到 MathJax 可以看到它们的 Markdown 输出中（以及\\\\( \int \\\\)在您的初始字符串中）。当然，您可以将 MathJax 配置为使用您想要的任何分隔符，但美元是普通的 TeX 方法。

于 2013-09-28T20:43:09.077 回答