Formula_Embed/index.html at master · IvanaGyro/Formula_Embed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formula Embed</title>
</head>

<body>
    <textarea id="input_formula"></textarea>
    <div id="result"></div>
    <a id="url"></a>
    <script>
        window.MathJax = {
            jax: ["input/TeX", "input/MathML", "output/SVG", "output/PreviewHTML"],
            extensions: ["tex2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js",
                "AssistiveMML.js", "a11y/accessibility-menu.js"
            ],
            elements: [],
            showMathMenu: true,
            showProcessingMessages: false,
            messageStyle: "none",
            SVG: {
                useGlobalCache: false
            },
            TeX: {
                extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js", "noErrors.js", "noUndefined.js"]
            },
            AuthorInit: function () {
                MathJax.Hub.Register.StartupHook("End", function () {
                    var input_area = document.getElementById("input_formula");
                    input_area.oninput = update;
                });
            }
        }
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" async></script>
    <script>
        function update() {
            var input_area = document.getElementById("input_formula");
            var wrapper = document.createElement("div");
            wrapper.innerHTML = input_area.value;
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
            MathJax.Hub.Queue(function () {
                var result = document.getElementById("result");
                result.innerHTML = wrapper.innerHTML;
                var formula_display = result.getElementsByClassName("MathJax_SVG")[0];
                var height = formula_display.offsetHeight + 1; // real height may be float
                var width = formula_display.offsetWidth + 1; // real width may be float
                var url = document.getElementById("url");
                url.href = location.origin + "/formula?formula=" +  encodeURIComponent(input_area.value) + "&width=" + width + "&height=" + height;
                url.innerText = url.href;
            });
        }
    </script>
</body>

</html>