thinker-md
/
develop.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Thinker-MD</title>
</head>
<body>
<textarea id="MathInput" name="content" rows="10" placeholder="这里输入内容,支持Markdown语法."onkeyup="Preview.Update()"></textarea>
<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
<div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; margin-top:5px;
visibility:hidden; position:absolute; top:0; left: 0"></div>
<style type="text/css">
    @import "public/stylesheets/vendor/font.css";
    @import "public/stylesheets/vendor/markdown.css";
    @import "public/stylesheets/emoji/nature.css";
    @import "public/stylesheets/emoji/object.css";
    @import "public/stylesheets/emoji/people.css";
    @import "public/stylesheets/emoji/place.css";
    @import "public/stylesheets/emoji/Sysmbols.css";
    @import "public/stylesheets/emoji/twemoji.css";
    @import "public/stylesheets/vendor/font-awesome.css";
    @import "public/stylesheets/vendor/sunburst.css";
</style>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/underscore/underscore-min.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/highlight/highlight.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/he.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/marked.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/to-markdown.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/jsHtmlToText.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/tab.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/config.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/emoji.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/bootstrap-markdown.js"></script>
<script type="text/javascript" charset="utf-8" src="public/javascripts/vendor/markdown/locale/bootstrap-markdown.zh.js"></script>
<script>
    $("textarea").markdown({
        language: 'zh',
        fullscreen: {
            enable: true
        },
        resize: 'vertical',
        localStorage: 'md',
        imgurl: '/c/imgUpload',
        base64url: '/c/imgUpload'
    });
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showProcessingMessages: false,
    tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
  });
</script>
<script>
    var Preview = {
        delay: 150,        // delay after keystroke before updating

        preview: null,     // filled in by Init below
        buffer: null,      // filled in by Init below

        timeout: null,     // store setTimout id
        mjRunning: false,  // true when MathJax is processing
        mjPending: false,  // true when a typeset has been queued
        oldText: null,     // used to check if an update is needed

        //
        //  Get the preview and buffer DIV's
        //
        Init: function () {
            this.preview = document.getElementById("MathPreview");
            this.buffer = document.getElementById("MathBuffer");
        },

        //
        //  Switch the buffer and preview, and display the right one.
        //  (We use visibility:hidden rather than display:none since
        //  the results of running MathJax are more accurate that way.)
        //
        SwapBuffers: function () {
            var buffer = this.preview, preview = this.buffer;
            this.buffer = buffer; this.preview = preview;
            buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
            preview.style.position = ""; preview.style.visibility = "";
        },

        //
        //  This gets called when a key is pressed in the textarea.
        //  We check if there is already a pending update and clear it if so.
        //  Then set up an update to occur after a small delay (so if more keys
        //    are pressed, the update won't occur until after there has been
        //    a pause in the typing).
        //  The callback function is set up below, after the Preview object is set up.
        //
        Update: function () {
            if (this.timeout) {clearTimeout(this.timeout)}
            this.timeout = setTimeout(this.callback,this.delay);
        },

        //
        //  Creates the preview and runs MathJax on it.
        //  If MathJax is already trying to render the code, return
        //  If the text hasn't changed, return
        //  Otherwise, indicate that MathJax is running, and start the
        //    typesetting.  After it is done, call PreviewDone.
        //
        CreatePreview: function () {
            Preview.timeout = null;
            if (this.mjPending) return;
            var text = document.getElementById("MathInput").value;
            if (text === this.oldtext) return;
            if (this.mjRunning) {
                this.mjPending = true;
                MathJax.Hub.Queue(["CreatePreview",this]);
            } else {
                this.buffer.innerHTML = this.oldtext = text;
                this.mjRunning = true;
                MathJax.Hub.Queue(
                        ["Typeset",MathJax.Hub,this.buffer],
                        ["PreviewDone",this]
                );
            }
        },

        //
        //  Indicate that MathJax is no longer running,
        //  and swap the buffers to show the results.
        //
        PreviewDone: function () {
            this.mjRunning = this.mjPending = false;
            this.SwapBuffers();
        }

    };

    //
    //  Cache a callback to the CreatePreview action
    //
    Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
    Preview.callback.autoReset = true;  // make sure it can run more than once

</script>
<script>
    Preview.Init();
</script>
</body>
</html>