JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<h4>Syntax</h4>

<pre>
<math-item role="math" [preview]>
    [HTML...]
    <math-source type="...">...</math-source>
    <math-source type="..." src="..."></math-source>
    ...
</math-item>
</pre>

<h4>Plain HTML</h4>

<math-item role="math">
    x<sup>2</sup>
    <math-source type="application/x-tex">x^2</math-source>
    <math-source type="image/png" src="http://example.com/eqn.png"></math-source>
</math-item>

<p>The immediate HTML children of the math-item element (if present) is what the browser will initially show. It can be used for previews, possibly using images.</p>

<h4>MathML</h4>

<math-item role="math">
    <math>
        <msup><mi>x</mi><mn>2</mn></msup>
    </math>
    <math-source type="text/html">x<sup>2</sup></math-source>
</math-item>

<h4>TeX</h4>

<math-item role="math">
    <math-source type="application/x-tex">x^2</math-source>
    <math-source type="application/mathml+xml">
        <math>
            <msup><mi>x</mi><mn>2</mn></msup>
        </math>
    </math-source>
</math-item>

<p>If Custom Elements are supported by the browser, a hook on the math-item element will take care of triggering MathJax rendering. Otherwise, the triggering will be handled when running through the math items after the DOM has loaded. If the browser supports it, the HTML produced by MathJax can be placed in the ShadowDOM.</p>

<h4>Equation images</h4>

<math-item role="math" preview>
    <img src="http://example.com/eqn.png" />
    <math-source type="application/x-tex">x^2</math-source>
    <math-source type="text/html">x<sup>2</sup></math-source>
    <math-source type="image/png" src="http://example.com/eqn.png"></math-source>
</math-item>

<p>Inspired by the source element used by, e.g., the picture and video elements, media queries and srcset attributes can be used for responsive sites (?).</p>

CSS

math-item > math-source {
    display: none;
}