JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<div id="mathmathmath">
<span class="mopen">(</span>
<span class="mord">2</span>
<span class="mord">
    <span class="mathit">x</span>
    <span class="msupsub">
        <span class="msup"><span class="mord">2</span></span>
        <span class="msub"><span class="mord">3</span></span>
    </span>
</span>
<span class="mbin">+</span>
<span class="mord">3</span>
<span class="mclose">)</span>
</div>

CSS

@font-face {
    font-family: MathJax_Main;
    src: url("http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf");
}

@font-face {
    font-family: MathJax_Main;
    src: url("http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf");
    font-style: italic;
}

@font-face {
    font-family: MathJax_Math;
    src: url("http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf");
    font-style: italic;
}

/*
thin space: 1/6 quad
medium space: 2/9 quad
thick space: 5/18 quad

things to do:
^ _ and styles
\sin
\sum, \int, \lim
\frac
\sqrt
big parens
*/

body {
    font-size: 18px;
    font-family: MathJax_Main;
}

.mathit {
    font: italic 1em MathJax_Math;
}

.mord + .mbin {
    margin-left: 0.22222em;
}

.mbin + .mord {
    margin-left: 0.22222em;
}

.msub {
    font-size: 0.7em;
    position: relative;
    top: 0.2em;
}

.msup {
    position: relative;
    top: -0.4em;
    font-size: 0.7em;
}

.msupsub {
    display: inline-table;
    table-layout: fixed;
    vertical-align: middle;
}

.msupsub > .msup, .msupsub > .msub {
    display: table-row;
    vertical-align: baseline;
    line-height: 1em;
    top: 0;
}

JavaScript

var mmm = document.getElementById("mathmathmath");
var q = [mmm];
while (q.length) {
    var n = q.shift();
    if (n.nodeType === 1) {
        q.push.apply(q, n.childNodes);
    } else if (n.nodeType === 3) {
        n.textContent = n.textContent.replace(/\s+/g, "");
    }
}