index.html

<!DOCTYPE html>
<html>

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141855237-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-141855237-1');
    </script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Latex to Markdown - Online Converter & Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="title" content="Latex to Markdown - Online Converter & Editor">
    <meta name="description"
        content="Convert & Edit online your latex mathematical notation formulae into images ready to be embeded in your markdown.">
    <!--
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
    -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0px;
        }

        textarea {
            width: calc(100% - 2px);
            padding: 0;
            height: 40%;
            display: inline-block;
        }

        h1, h2 {
            display: block;
            _font-size: initial;
            margin-block-start: initial;
            margin-block-end: initial;
            margin-inline-start: initial;
            margin-inline-end: initial;
            _font-weight: initial;
        }

        a:hover {
            opacity: .8;
        }
    </style>
</head>

<body style="display: flex;flex-flow: column;">
    <header style="padding: 8px;
    background-image: linear-gradient(to right, #5f9ec0, #5a9fb9, #599fb1, #5b9fa8, #5f9ea0); display:flex;
    flex-direction: row; align-items: center; flex: 0 1 auto;">
        <h1 style="font-size:medium;">Online Converter & Editor - Latex math notation to Markdown</h1>
        <a style="margin-left:auto;" href="https://github.com/8HoLoN/latex-to-markdown" target="_blank" title="GitHub">
            <img style="height:24px;" src="./github-icon.svg" alt="github-icon">
        </a>
    </header>
    <main style="flex: 1 1 auto;">
        <div style="display: table;width: 100%;">
            <div style="display: table-cell;width: 50%;">
                <h2>Latex</h1>
                <textarea id="latex" rows="5"
                    cols="33">\mathcal{W}(A,f) = (T,\bar{f}) \\ \therefore \mathcal{W}(A,f) = (T,\bar{f})</textarea>
            </div>
            <div style="display: table-cell;width: 50%;">
                <h2>Markdown</h1>
                <textarea id="md" rows="5" cols="33"></textarea>
            </div>
        </div>
        <div>
            <h2>Render</h1>
            <img id="render" style="margin: 10px;" src="">
        </div>

    </main>

    <script>
        const baseUrl = `https://latex.codecogs.com/svg.latex?`;// gif png pdf swf emf svg 

        document.querySelector('#latex').addEventListener('input', e => {
            // e.currentTarget.value
            displayFormula();
        })

        /*
            <\\>  : breakline
            <\ >  : space
        //*/
        // decodeURI
        // decodeURIComponent
        // encodeURI
        // encodeURIComponent
        const displayFormula = () => {
            let latex = document.querySelector('#latex').value;// .textContent;
            latex = `\\\\ ${latex}`;
            //latex = latex.replace(/ /g," \\ "); handle multiple spaces
            latex = latex.replace(/\n/g, " \\\\ ");
            //console.log(latex);
            const latexEncoded = encodeURIComponent(latex);
            const link = `${baseUrl}${latexEncoded}`;
            document.querySelector('#render').src = link;

            const md = `[![${latex}](${link})](#_)`;
            document.querySelector('#md').value = md;
        }
        displayFormula();
    </script>
</body>

</html>