我尝试在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页面上有一个类似的示例,它处理方程式但不处理降价。