JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;delayStartupUntil=configured&amp;dummy=.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

MathJax.Hub.Config({skipStartupTypeset: true});
MathJax.Hub.Configured();

var MJ = React.createClass({
    render: function() {
        return <span />;
    },

    componentDidMount: function(span) {
        var text = this.props.children;

        this.script = document.createElement("script");
        this.script.type = "math/tex";
        this.script.appendChild(document.createTextNode(text));
        span.appendChild(this.script);

        MathJax.Hub.Queue(["Process", MathJax.Hub, span]);
    },

    componentDidUpdate: function(prevProps, prevState, span) {
        var oldText = prevProps.children;
        var newText = this.props.children;

        if (oldText !== newText) {
            var jax = MathJax.Hub.getJaxFor(this.script);
            MathJax.Hub.Queue(["Text", jax, newText]);
        }
    },

    componentWillUnmount: function() {
        var jax = MathJax.Hub.getJaxFor(this.script);
        if (jax) {
            jax.Remove();
        }
    }
});

var MathEditor = React.createClass({
    getInitialState: function() {
        return {expr: "2x^2 - 3"}
    },

    handleKeyUp: React.autoBind(function(e) {
        this.setState({expr: e.target.value});
    }),

    render: function() {
        return <div>
            <input onKeyUp={this.handleKeyUp} value={this.state.expr} /><br />
            <MJ>{this.state.expr}</MJ>
        </div>;
    }
});
 
React.renderComponent(<MathEditor />, document.body);