Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
    <div class="pure-g">
        <div class="pure-u-2-3">
            <div class="center">
                <div class="wrapIn">
                    <div class="title">#1 Example Code</div>
                    <div class="body">
                        <code class="display">\$\${1+√5}/2=1+1/{1+1/{1+...}}\$\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#1 Example Result</div>
                    <div class="body">$${1+√5}/2=1+1/{1+1/{1+...}}$$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#2 Example Code</div>
                    <div class="body">
                        <code class="display">\\[\text"average speed" = \text"distance traveled" / \text"elapsed time"\\]</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#2 Example Result</div>
                    <div class="body">\[\text"average speed" = \text"distance traveled" / \text"elapsed time"\]</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#3 ExampleCode</div>
                    <div class="body">
                        <code class="display">\$(\table \cos θ, - \sin θ; \sin θ, \cos θ)\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#3 Example Result</div>
                    <div class="body">$(\table \cos θ, - \sin θ; \sin θ, \cos θ)$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#4 Example Code</div>
                    <div class="body">
                        <code class="display">\$\$\cl"ma-join-align" {\table ∫_a^b f(x) dx,={lim}↙{ε→0}∫_(a+ε)^b f(x)dx ;∫_b^∞ f(x) dx,= {lim}↙{b→∞}∫_a^b f(x)dx\$\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#4 Example Result</div>
                    <div class="body">$$\cl"ma-join-align" {\table ∫_a^b f(x) dx,={lim}↙{ε→0}∫_(a+ε)^b f(x)dx ;∫_b^∞ f(x) dx,= {lim}↙{b→∞}∫_a^b f(x)dx$$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#5 Example Code</div>
                    <div class="body">
                        <code class="display">\\[c_n ≝ \{\, \cl"ma-join1-align" { \table A_n / { 2i } e^{ iϕn } = 1/2 (a_n - ib_n), for, n>0; 1/2 a_0, for, n=0; c^{*}_{|n|}, for, n&lt;0}\\] </code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#5 Example Result</div>
                    <div class="body"> \[c_n ≝ \{\, \cl"ma-join1-align" { \table A_n / { 2i } e^{ iϕn } = 1/2 (a_n - ib_n), for, n>0; 1/2 a_0, for, n=0; c^{*}_{|n|}, for, n&lt;0}\] </div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#6 Example Code</div>
                    <div class="body">
                        <code class="display">\$\$NaCl_(aq)+AgNO_3_(aq) → NaNO_3_(aq)+AgCl_(s)\$\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#6 Example Result</div>
                    <div class="body">$$NaCl_(aq)+AgNO_3_(aq) → NaNO_3_(aq)+AgCl_(s)$$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#7 Example Code</div>
                    <div class="body">
                        <code class="display">\$\$[\O\H^{-}]=K_\W/[\H^{+}]\$\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#7 Example Result</div>
                    <div class="body">$$[\O\H^{-}]=K_\W/[\H^{+}]$$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">#8 Example Code</div>
                    <div class="body">
                        <code class="display">\$\$N_(t)=N_o(1/2)^{t/t_{1/2}}\$\$</code>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">#8 Example Result</div>
                    <div class="body">$$N_(t)=N_o(1/2)^{t/t_{1/2}}$$</div>
                </div>
            </div>

            <div class="center">
                <div class="wrapIn">
                    <div class="title">Try Your Code</div>
                    <div class="body">
                        $$<textarea title="you don't need to put delimiter $$ or \[ as the beginning" placeholder="try it out here" rows="3" class="input"> </textarea>$$

                        <div class="body" style="margin-top:20px;margin-bottom:0">
                            <code class="yourcode">Your wrapped code will appear here</code>
                        </div>
                    </div>
                </div>
                <div class="wrapIn">
                    <div class="title">Your Result</div>
                    <div class="body output"></div>
                </div>
            </div>

        </div>

        <div class="pure-u-1-3 floatr">
            <div class="center float">
                <div class="title">
                    jqMath semantics
                </div>
                <div class="fbody">
                    <ul>
                        <li><mark>\$</mark>, or <mark>\\(</mark> and <mark>\\)</mark>, to delimit inline mathematics</li>
                        <li><mark>\$\$</mark>, or <mark>\\[</mark> and <mark>\\]</mark>, to delimit block or “display” mathematics</li>
                        <li><mark>^</mark> for superscript</li>
                        <li><mark>_</mark> for subscript</li>
                        <li><mark>{</mark> and <mark>}</mark> for grouping</li>
                        <li><mark>↖</mark> for overscript</li>
                        <li><mark>↙</mark> for underscript</li>
                        <li><mark>\</mark> or <mark>`</mark> to quote the next character (turning off its special meaning), start a macro or multi-letter name, or make a name non-italic</li>
                        <li><mark>\bo</mark>, <mark>\it</mark>, or <mark>\bi</mark> for a bold, italic, or bold-italic variable</li>
                        <li><mark>\sc</mark> for "Script" letters and <mark>\fr</mark> for a script or "Fraktur" letter</li>
                        <li><mark>\ov</mark> for an overbar</li>
                        <li><mark>\table</mark> for a matrix, table, or simply tabular alignment - separate entries with <mark>,</mark> and rows with <mark>;</mark></li>
                        <li>use <mark>\\cl"ma-join<small>[something]</small>-align"</mark> before the <mark>\table</mark> to align the table to left.<br>[something] can be empty or consist of integer: 0, 1, 2 etc.<br>
                            <u>Example</u><br>
                            <small><code title="you can copy paste this to test the output">\cl"ma-join1-align"{\table 1,+,a,=, 2;,,a ,=, 2 - 1;,,\bi a,=,\bo 1}</code></small>
                        </li>
                        <li><mark>\text</mark> or <mark>\html</mark> for plain text or html inside mathematics - specify the text or html inside quotes</li>
                        <li>spaces, tabs and newlines are ignored</li>
                        <li>add additional backslash <mark><u>\</u>\$</mark> for <u>escaping</u> <mark>\$</mark><br> or<br> <mark><u>\</u>\\</mark> for <u>escaping</u> <mark>\\</mark></li>
                    </ul>
                </div>
            </div>
            <div class="center float">
                <div class="title">
                    UNICODE Symbols
                </div>
                <div class="fbody">
                    <div class="symbols"></div>
                </div>
            </div>

        </div>

    </div>
</div>
              
            
!

CSS

              
                /*!
Pure v0.4.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v1.1.3 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}[hidden]{display:none!important}.pure-g{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;-webkit-flex-flow:row wrap;display:-ms-flexbox;-ms-flex-flow:row wrap}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class *="pure-u"]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%;*width:4.1357%}.pure-u-1-12,.pure-u-2-24{width:8.3333%;*width:8.3023%}.pure-u-1-8,.pure-u-3-24{width:12.5%;*width:12.469%}.pure-u-1-6,.pure-u-4-24{width:16.6667%;*width:16.6357%}.pure-u-1-5{width:20%;*width:19.969%}.pure-u-5-24{width:20.8333%;*width:20.8023%}.pure-u-1-4,.pure-u-6-24{width:25%;*width:24.969%}.pure-u-7-24{width:29.1667%;*width:29.1357%}.pure-u-1-3,.pure-u-8-24{width:33.3333%;*width:33.3023%}.pure-u-3-8,.pure-u-9-24{width:37.5%;*width:37.469%}.pure-u-2-5{width:40%;*width:39.969%}.pure-u-10-24,.pure-u-5-12{width:41.6667%;*width:41.6357%}.pure-u-11-24{width:45.8333%;*width:45.8023%}.pure-u-1-2,.pure-u-12-24{width:50%;*width:49.969%}.pure-u-13-24{width:54.1667%;*width:54.1357%}.pure-u-14-24,.pure-u-7-12{width:58.3333%;*width:58.3023%}.pure-u-3-5{width:60%;*width:59.969%}.pure-u-15-24,.pure-u-5-8{width:62.5%;*width:62.469%}.pure-u-16-24,.pure-u-2-3{width:66.6667%;*width:66.6357%}.pure-u-17-24{width:70.8333%;*width:70.8023%}.pure-u-18-24,.pure-u-3-4{width:75%;*width:74.969%}.pure-u-19-24{width:79.1667%;*width:79.1357%}.pure-u-4-5{width:80%;*width:79.969%}.pure-u-20-24,.pure-u-5-6{width:83.3333%;*width:83.3023%}.pure-u-21-24,.pure-u-7-8{width:87.5%;*width:87.469%}.pure-u-11-12,.pure-u-22-24{width:91.6667%;*width:91.6357%}.pure-u-23-24{width:95.8333%;*width:95.8023%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}.pure-g-r{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;-webkit-flex-flow:row wrap;display:-ms-flexbox;-ms-flex-flow:row wrap}.opera-only :-o-prefocus,.pure-g-r{word-spacing:-.43em}.pure-g-r [class *="pure-u"]{font-family:sans-serif}.pure-g-r img{max-width:100%;height:auto}@media (min-width:980px){.pure-hidden-desktop,.pure-visible-phone,.pure-visible-tablet{display:none}}@media (max-width:480px){.pure-g-r>.pure-u,.pure-g-r>[class *="pure-u-"]{width:100%}}@media (max-width:767px){.pure-g-r>.pure-u,.pure-g-r>[class *="pure-u-"]{width:100%}.pure-hidden-phone,.pure-visible-desktop{display:none}}@media (min-width:768px) and (max-width:979px){.pure-hidden-tablet,.pure-visible-desktop{display:none}}.pure-button{display:inline-block;*display:inline;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;font-size:100%;*font-size:90%;*overflow:visible;padding:.5em 1em;color:#444;color:rgba(0,0,0,.8);*color:#444;border:1px solid #999;border:0 rgba(0,0,0,0);background-color:#E6E6E6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:0;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);filter:alpha(opacity=40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4;cursor:not-allowed;box-shadow:none}.pure-button-hidden{display:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-form input:not([type]),.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;font-size:.8em;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pure-form input:not([type]):focus,.pure-form input[type=color]:focus,.pure-form input[type=date]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=email]:focus,.pure-form input[type=month]:focus,.pure-form input[type=number]:focus,.pure-form input[type=password]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=text]:focus,.pure-form input[type=time]:focus,.pure-form input[type=url]:focus,.pure-form input[type=week]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;outline:thin dotted \9;border-color:#129FEA}.pure-form input[type=checkbox]:focus,.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus{outline:thin dotted #333;outline:1px auto #129FEA}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input:not([type])[disabled],.pure-form input[type=color][disabled],.pure-form input[type=date][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=email][disabled],.pure-form input[type=month][disabled],.pure-form input[type=number][disabled],.pure-form input[type=password][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=text][disabled],.pure-form input[type=time][disabled],.pure-form input[type=url][disabled],.pure-form input[type=week][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly]{background:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid{color:#b94a48;border:1px solid #ee5f5b}.pure-form input:focus:invalid:focus,.pure-form select:focus:invalid:focus,.pure-form textarea:focus:invalid:focus{border-color:#e9322d}.pure-form input[type=checkbox]:focus:invalid:focus,.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em;font-size:90%}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;font-size:125%;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input:not([type]),.pure-form-stacked input[type=color],.pure-form-stacked input[type=date],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=email],.pure-form-stacked input[type=month],.pure-form-stacked input[type=number],.pure-form-stacked input[type=password],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=text],.pure-form-stacked input[type=time],.pure-form-stacked input[type=url],.pure-form-stacked input[type=week],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned .pure-help-inline,.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline{display:inline-block;*display:inline;*zoom:1;vertical-align:middle}.pure-form-aligned textarea{vertical-align:top}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 10em}.pure-form .pure-input-rounded,.pure-form input.pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input{display:block;padding:10px;margin:0;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus{z-index:2}.pure-form .pure-group input:first-child{top:1px;border-radius:4px 4px 0 0}.pure-form .pure-group input:last-child{top:-2px;border-radius:0 0 4px 4px}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:90%}.pure-form-message{display:block;color:#666;font-size:90%}@media only screen and (max-width :480px){.pure-form button[type=submit]{margin:.7em 0 0}.pure-form input:not([type]),.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form label{margin-bottom:.3em;display:block}.pure-group input:not([type]),.pure-group input[type=color],.pure-group input[type=date],.pure-group input[type=datetime-local],.pure-group input[type=datetime],.pure-group input[type=email],.pure-group input[type=month],.pure-group input[type=number],.pure-group input[type=password],.pure-group input[type=search],.pure-group input[type=tel],.pure-group input[type=text],.pure-group input[type=time],.pure-group input[type=url],.pure-group input[type=week]{margin-bottom:0}.pure-form-aligned .pure-control-group label{margin-bottom:.3em;text-align:left;display:block;width:100%}.pure-form-aligned .pure-controls{margin:1.5em 0 0}.pure-form .pure-help-inline,.pure-form-message,.pure-form-message-inline{display:block;font-size:80%;padding:.2em 0 .8em}}.pure-menu ul{position:absolute;visibility:hidden}.pure-menu.pure-menu-open{visibility:visible;z-index:2;width:100%}.pure-menu ul{left:-10000px;list-style:none;margin:0;padding:0;top:-10000px;z-index:1}.pure-menu>ul{position:relative}.pure-menu-open>ul{left:0;top:0;visibility:visible}.pure-menu-open>ul:focus{outline:0}.pure-menu li{position:relative}.pure-menu .pure-menu-heading,.pure-menu a{display:block;line-height:1.5em;padding:5px 20px;text-decoration:none;white-space:nowrap}.pure-menu.pure-menu-horizontal>.pure-menu-heading{display:inline-block;*display:inline;zoom:1;margin:0;vertical-align:middle}.pure-menu.pure-menu-horizontal>ul{display:inline-block;*display:inline;zoom:1;vertical-align:middle}.pure-menu li a{padding:5px 20px}.pure-menu-can-have-children>.pure-menu-label:after{content:'\25B8';float:right;font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif;margin-right:-20px;margin-top:-1px}.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-separator{background-color:#dfdfdf;display:block;height:1px;font-size:0;margin:7px 2px;overflow:hidden}.pure-menu-hidden{display:none}.pure-menu-fixed{position:fixed;top:0;left:0;width:100%}.pure-menu-horizontal li{display:inline-block;*display:inline;zoom:1;vertical-align:middle}.pure-menu-horizontal li li{display:block}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label:after{content:"\25BE"}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-horizontal li.pure-menu-separator{height:50%;width:1px;margin:0 7px}.pure-menu-horizontal li li.pure-menu-separator{height:1px;width:auto;margin:7px 2px}.pure-menu.pure-menu-horizontal li .pure-menu-children,.pure-menu.pure-menu-open{background:#fff;border:1px solid #b7b7b7}.pure-menu.pure-menu-horizontal,.pure-menu.pure-menu-horizontal .pure-menu-heading{border:0}.pure-menu a{border:1px solid transparent;border-left:0;border-right:0}.pure-menu .pure-menu-can-have-children>li:after,.pure-menu a{color:#777}.pure-menu .pure-menu-can-have-children>li:hover:after{color:#fff}.pure-menu .pure-menu-open{background:#dedede}.pure-menu li a:focus,.pure-menu li a:hover{background:#eee}.pure-menu li.pure-menu-disabled a:focus,.pure-menu li.pure-menu-disabled a:hover{background:#fff;color:#bfbfbf}.pure-menu .pure-menu-disabled>a{background-image:none;border-color:transparent;cursor:default}.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after,.pure-menu .pure-menu-disabled>a{color:#bfbfbf}.pure-menu .pure-menu-heading{color:#565d64;text-transform:uppercase;font-size:90%;margin-top:.5em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#dfdfdf}.pure-menu .pure-menu-selected a{color:#000}.pure-menu.pure-menu-open.pure-menu-fixed{border:0;border-bottom:1px solid #b7b7b7}.pure-paginator{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed;list-style:none;margin:0;padding:0}.opera-only :-o-prefocus,.pure-paginator{word-spacing:-.43em}.pure-paginator li{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-paginator .pure-button{border-radius:0;padding:.8em 1.4em;vertical-align:top;height:1.1em}.pure-paginator .pure-button:active,.pure-paginator .pure-button:focus{outline-style:none}.pure-paginator .next,.pure-paginator .prev{color:#C0C1C3;text-shadow:0 -1px 0 rgba(0,0,0,.45)}.pure-paginator .prev{border-radius:2px 0 0 2px}.pure-paginator .next{border-radius:0 2px 2px 0}@media (max-width:480px){.pure-menu-horizontal{width:100%}.pure-menu-children li{display:block;border-bottom:1px solid #000}}.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:6px 12px}.pure-table td:first-child,.pure-table th:first-child{border-left-width:0}.pure-table thead{background:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td,.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child td,.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0}
/*jQMath*/
fmath,.fm-math{font-family:STIXGeneral,'DejaVu Serif','DejaVu Sans',Times,'Lucida Sans Unicode',OpenSymbol,'Standard Symbols L',serif;line-height:1.2}fmath mtext,.fm-math mtext{line-height:normal}fmath mo,.fm-mo,.ma-sans-serif,fmath mi[mathvariant*=sans-serif],fmath mn[mathvariant*=sans-serif],fmath mtext[mathvariant*=sans-serif],fmath ms[mathvariant*=sans-serif]{font-family:STIXGeneral,'DejaVu Sans','DejaVu Serif','Lucida Sans Unicode','Arial Unicode MS','Lucida Grande',Times,OpenSymbol,'Standard Symbols L',sans-serif}.fm-mo-Luc{font-family:STIXGeneral,'DejaVu Sans','DejaVu Serif','Lucida Sans Unicode','Lucida Grande','Arial Unicode MS',Times,OpenSymbol,'Standard Symbols L',sans-serif}* html fmath,* html.fm-math,* html fmath mo,* html.fm-mo,* html.IE6-LSU{font-family:'Lucida Sans Unicode' !important}mo.fm-radic{font-family:'Lucida Sans Unicode','Lucida Grande',Verdana,sans-serif!important}.ma-script,fmath mi[mathvariant*=script],fmath mo[mathvariant*=script],fmath mn[mathvariant*=script],fmath mtext[mathvariant*=script],fmath ms[mathvariant*=script]{font-family:'England Hand DB','Embassy BT','Amazone BT','Bank Script D','URW Chancery L','Lucida Calligraphy','Apple Chancery','Monotype Corsiva',Corsiva,'Vivaldi D',Gabriola,'Segoe Script',cursive}.ma-fraktur,fmath mi[mathvariant*=fraktur],fmath mo[mathvariant*=fraktur],fmath mn[mathvariant*=fraktur],fmath mtext[mathvariant*=fraktur],fmath ms[mathvariant*=fraktur]{font-family:UnifrakturMaguntia,Impact,fantasy}fmath mi[mathvariant*=monospace],fmath mo[mathvariant*=monospace],fmath mn[mathvariant*=monospace],fmath mtext[mathvariant*=monospace],fmath ms[mathvariant*=monospace]{font-family:monospace}.fm-mi-length-1{font-style:italic}fmath mi[mathvariant]{font-style:normal}.ma-bold,fmath mi[mathvariant*=bold],fmath mo[mathvariant*=bold],fmath mn[mathvariant*=bold],fmath mtext[mathvariant*=bold],fmath ms[mathvariant*=bold]{font-weight:bold}.ma-nonbold{font-weight:normal}.ma-upright{font-style:normal!important}.ma-italic,fmath mi[mathvariant*=italic],fmath mo[mathvariant*=italic],fmath mn[mathvariant*=italic],fmath mtext[mathvariant*=italic],fmath ms[mathvariant*=italic]{font-style:italic}fmath.ma-block{display:block;text-align:center;text-indent:0;page-break-inside:avoid}.fm-separator{padding:0 0.56ex 0 0}.fm-infix-loose{padding:0 0.56ex}.fm-infix{padding:0 0.44ex}.fm-prefix{padding:0 0.33ex 0 0}.fm-postfix{padding:0 0 0 0.33ex}.fm-prefix-tight{padding:0 0.11ex 0 0}.fm-postfix-tight{padding:0 0 0 0.11ex}.fm-quantifier{padding:0 0.11ex 0 0.22ex}.ma-non-marking{display:none}.fm-large-op{font-size:1.3em}.fm-inline.fm-large-op{font-size:1em}fmath mrow{white-space:nowrap}.fm-vert{display:inline-block;vertical-align:middle}fmath table,fmath tbody,fmath tr,fmath td{border:0!important;padding:0!important;margin:0!important;outline:0!important}fmath table{border-collapse:collapse!important;text-align:center!important;table-layout:auto!important;float:none!important}.fm-frac{padding:0 1px!important}td.fm-den-frac{border-top:solid thin!important}.fm-root{font-size:0.6em}.fm-radicand{padding:0 1px 0 0;border-top:solid;margin-top:0.1em}.fm-script{font-size:0.71em}.fm-script.fm-script.fm-script{font-size:1em}td.fm-underover-base{line-height:1!important}td.fm-mtd{padding:0.5ex 0.4em!important;vertical-align:baseline!important}fmath mphantom{visibility:hidden}fmath menclose,menclose.fm-menclose{display:inline-block}fmath menclose[notation=top],menclose.fm-menclose[notation=top]{border-top:solid thin}fmath menclose[notation=right],menclose.fm-menclose[notation=right]{border-right:solid thin}fmath menclose[notation=bottom],menclose.fm-menclose[notation=bottom]{border-bottom:solid thin}fmath menclose[notation=left],menclose.fm-menclose[notation=left]{border-left:solid thin}fmath menclose[notation=box],menclose.fm-menclose[notation=box]{border:solid thin}fmath none{display:none}mtd.middle,fmath td.middle{vertical-align:middle!important}fmath table[columnalign=left],fmath tr[columnalign=left],fmath td[columnalign=left]{text-align:left!important}fmath table[columnalign=right],fmath tr[columnalign=right],fmath td[columnalign=right]{text-align:right!important}fmath td[rowalign=top]{vertical-align:top!important}fmath td[rowalign=bottom]{vertical-align:bottom!important}fmath td[rowalign=center]{vertical-align:middle!important}mtable.ma-join-align>mtr>mtd:first-child,fmath span.ma-join-align>table>tbody>tr>td:first-child{text-align:right;padding-right:0!important}mtable.ma-join-align>mtr>mtd:first-child+mtd,fmath span.ma-join-align>table>tbody>tr>td:first-child+td{text-align:left;padding-left:0!important}mtable.ma-join1-align>mtr>mtd:first-child,fmath span.ma-join1-align>table>tbody>tr>td:first-child{text-align:left;padding-left:0!important}mtable.ma-binom>mtr>mtd,fmath span.ma-binom>table>tbody>tr>td{padding:0!important}mtable.ma-binom>mtr:first-child>mtd,fmath span.ma-binom>table>tbody>tr:first-child>td{padding:0 0 0.18em 0!important}
/*this demo*/
body {
    font-family: 'Open Sans';
    background: #eee;
}

.input {
    font-family: 'Open Sans';
}

.wrapper {
    width: 700px;
    margin: 20px auto;
}

.center {
    text-align: center;
    padding: 10px;
    background: white;
    box-shadow: 1px 1px 2px #333;
    box-sizing: border-box;
    font-family: 'Open Sans' !important;
}

.display {
    font-family: consolas;
    font-size: 14px;
    background: aliceblue;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #555 inset;
    color: darkgreen;
    display: block;
}

.title {
    background: #ccc;
    margin: -10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    display: inline-block;
    background: black;
    color: white;
    border-radius: 0 0 6px 6px;
    font-size: 16px;
}

.wrapIn:nth-child(even) > .title {
    border-radius: 6px 6px 6px 6px;
}

.center:nth-child(odd) > .wrapIn:nth-child(odd) > .body > .display {
    background: lavender;
}

.title,
.body {
    font-family: consolas;
}

.body {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    overflow-x: auto;
    overflow-y: hidden;
}

.center:nth-child(even) {
    background: #ddd;
    margin: 15px 0;
}

.input {
    padding: 10px 0;
    border-radius: 6px;
    text-align: center;
    font-family: consolas;
    width: 80%;
    font-size: .65em;
    overflow: hidden;
    word-wrap: pre;
    overflow-x: none;
    overflow-y: auto;
    resize: none;
    color: darkgreen;
}

.output {
    min-height: 64px;
    background: #fff;
    box-shadow: 1px 1px 2px #333 inset;
}

.yourcode {
    font-family: consolas;
    background: #eee;
    font-size: 14px;
    padding: 10px;
    box-shadow: 1px 1px 2px #555 inset;
    display: block;
}

.fbody > ul {
    padding: 0;
}

.floatr {
    position: fixed;
    overflow-Y: auto;
    padding: 10px;
    margin-top: -10px;
}

.float {
    margin: 0;
    height: 410px;
    overflow-Y: auto;
    overflow-X: hidden;
}

.fbody > ul li {
    margin: 5px 0;
    text-align: left;
    list-style: none;
    padding: 10px;
    padding-right: 0;
    background: #ddd;
    font-size: 15px;
    line-height: 150%;
}

.fbody > ul li:nth-child(even) {
    background: #eee;
}

.symbols {
    font-family: georgia;
    font-size: 24px;
}

.charcode {
    margin: 5px;
    padding: 5px;
    display: inline-block;
}

.charcode:hover {
    background: #111;
    color: white;
}

.float > .title {
    position: fixed;
    margin-left: -70px;
}

.float > .fbody {
    margin-top: 30px;
    text-align: justified;
}

.pure-u-2-3 > .center:last-child {
    background: grey;
}

.pure-u-1-3 > .center:last-child {
    background: white;
    margin-top: 20px;
}
              
            
!

JS

              
                //rearranged script from the original https://mathscribe.com/author/jqmath.html + UI script (start and generateSymbols)
var test = {
    doMathSrc: function () {
        var ents_ = {
                nwarr: "↖",
                swarr: "↙"
            };
        var t = $(".input");
        var a = t.val().replace(/&([-#.\w]+);|\\([a-z]+)(?:\ |(?=[^a-z]))/gi, function (t, a, e) {
                if (e && (M.macros_[e] || M.macro1s_[e])) return t;
                var r = "&" + (a || e) + ";";
                var n = $("<span>" + r + "</span>").text();
                return n != r ? n : ents_[a || e] || t;
            });
        var e = a.replace(/</g, "&lt;");
        var r;
        
        t.val() != e && t.val(e);        
        try {
            r = M.sToMathE(a, 1);
        } catch (n) {
            r = String(n);
        }
        if (t.val().length > 0) {
            $(".output").empty().html(r);
            $(".yourcode").text("$$" + t.val() + "$$");
        } else {
            $(".output").html("");
            $(".yourcode").text("Your code will appear here");
        }
    },
    checkUnicodeTitle: function (t) {
        var a = t.target;
        var e = a.firstChild;
        var r;
        var n;
        var i;
        var s;
        if (1 === a.nodeType && e && a.lastChild === e && 3 === e.nodeType) {
            if (n > 0 && 2 >= n) {
                i = function (t) {
                    var v;
                    for (v = r.charCodeAt(t).toString(16).toUpperCase(); a.length < 4;) a = "0" + a;
                    return "U+" + a
                };
                s = F.fToA(i, n).join(" ");
                a.title ? -1 === a.title.indexOf(s) && (a.title = s + ": " + a.title) : a.title = s
            }
        }
    },
    generateSymbols: function () {
        var a = [];
        function pusher(num_0, num_1, num_2) {
            while (num_0 <= num_1) {
                if (num_0 !== num_2) {
                    a.push("<span class='charcode' title='charCode hex: " + num_0.toString(16) + ", dec: " + num_0 + "'>" + String.fromCharCode(num_0) + "</span>");
                }
                num_0 += 1;
            }
        }
        pusher(913, 937, 930);
        pusher(945, 969, 0);
        pusher(8592, 9082, 0);
        pusher(8962, 9082, 0);
        pusher(9115, 9143, 0);
        pusher(9180, 9183, 0);
        return a;
    },
    insertToSrc2: function (t) {
        var a = t.target;
        var e = a.firstChild;
        var r;
        var n;
        if (1 === a.nodeType && e && a.lastChild === e && 3 === e.nodeType) {
            r = e.data;
            n = r.length;
            if (n > 0 && 2 >= n) {
                "⁄" === r ? r = "/" : "&" === r ? r = "&amp;" : "<" === r ? r = "&lt;" : $(a).hasClass("no-meta") || $(a).is(".use-backslash *") ? r = "\\" + r : $(a).is(".use-sc *") ? r = "\\sc " + r : $(a).is(".use-fr *") && (r = "\\fr " + r);
                $(".output").eq(0).html(r);
            }
        }
    },    
    start: function () {
        $(".input").on("keyup", test.doMathSrc);
        $(".floatr").css({width: $(".wrapper").width() / 3});
        $(".symbols").html(test.generateSymbols().join(" "));
    }
};
// These can be wrapped in one function. So that if you have lots of external JS modules, they can be created asynchronously (not stopping HTML load) but still in series (dependency related).
//The last autoinvoked function is for loading jQuery, and the "inject_jqMath_module" is for loading jqMath module. jQuery first, then jqMath, but they're coded in reverse. I dunno.
function inject_jqMath_module(d) {
    var sc = d.createElement("script");
    sc.src = "https://storage.googleapis.com/assets.johanpaul.net/files/jqMath_gs.js";
    $("head")[0].appendChild(sc);
    sc.onload = test.start;
}
(function (d) {
    var h = d.querySelector("head");
    var s = d.createElement("script");
    s.src = "//code.jquery.com/jquery-2.2.4.min.js";
    s.onload = function () {
        inject_jqMath_module(d);
    };
    h.appendChild(s);    
}(document));
              
            
!
999px

Console