diff --git a/static/pandoc-preview.html b/static/pandoc-preview.html
new file mode 100644
index 0000000..66c9289
--- /dev/null
+++ b/static/pandoc-preview.html
@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Markdown Preview</title>
+  <style>
+
+    a{text-decoration:none;}
+
+    p{margin:1em 0;}
+
+    img{max-width:100%;}
+
+    h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;line-height:1em;}
+    h4,h5,h6{ font-weight: bold; }
+    h1{ font-size:2.5em; }
+    h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
+    h3{ font-size:1.5em; }
+    h4{ font-size:1.2em; }
+    h5{ font-size:1em; }
+    h6{ font-size:0.9em; }
+
+    blockquote{color:#666666;margin:0;padding-left: 3em;border-left: 0.5em #EEE solid;}
+    hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
+
+    pre, code{
+      color: #000;
+      font-family: monospace;
+      font-size: 0.88em;
+      border-radius:3px;
+      background-color: #F8F8F8;
+      border: 1px solid #CCC;
+    }
+    pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
+    pre code { border: 0px !important; background: transparent !important; line-height: 1.3em; }
+    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+    sup { top: -0.5em; }
+    sub { bottom: -0.25em; }
+    ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
+    li p:last-child { margin:0 }
+    dd { margin: 0 0 0 2em; }
+    img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+    table { border-collapse: collapse; border-spacing: 0; }
+    td, th { vertical-align: top; padding: 4px 10px; border: 1px solid #bbb; }
+    tr:nth-child(even) td, tr:nth-child(even) th { background: #eee; }
+
+    ins { text-decoration: none; color: green }
+    del { text-decoration: none; color: red }
+    ins a{ color: green; text-decoration:none; }
+    del a{ color: red; text-decoration: none; }
+
+    #page { position: relative; }
+    #mes { position: fixed; margin-right: -40px; visibility: hidden; }
+
+  </style>
+
+  <script>
+
+    var flag_manual = false;
+
+    var smooth_scroll_to = function(target, duration) {
+        target = Math.round(target);
+        duration = Math.round(duration);
+        if (duration === 0) {
+            window.scrollTo(0, target);
+            return
+        }
+
+        var start_time = Date.now();
+        var end_time = start_time + duration;
+
+        var start_top = document.documentElement.scrollTop || document.body.scrollTop
+        var distance = target - start_top;
+
+        // based on http://en.wikipedia.org/wiki/Smoothstep
+        var smooth_step = function(start, end, point) {
+            if(point <= start) { return 0; }
+            if(point >= end) { return 1; }
+            var x = (point - start) / (end - start); // interpolation
+            return x*x*(3 - 2*x);
+        }
+
+        // This is to keep track of where the window's scrollTop is
+        // supposed to be, based on what we're doing
+        var previous_top = document.documentElement.scrollTop || document.body.scrollTop
+
+        // This is like a think function from a game loop
+        var scroll_frame = function() {
+            var tmp = document.documentElement.scrollTop || document.body.scrollTop
+            if(tmp != previous_top) {
+                return;
+            }
+
+            // set the scrollTop for this frame
+            var now = Date.now();
+            var point = smooth_step(start_time, end_time, now);
+            var frameTop = Math.round(start_top + (distance * point));
+            window.scrollTo(0, frameTop);
+
+            // check if we're done!
+            if(now >= end_time) {
+                return;
+            }
+
+            // If we were supposed to scroll but didn't, then we
+            // probably hit the limit, so consider it done; not
+            // interrupted.
+            var tmp = document.documentElement.scrollTop || document.body.scrollTop
+            if(tmp === previous_top
+                && tmp !== frameTop) {
+                return;
+            }
+            previous_top = tmp;
+
+            // schedule next frame for execution
+            setTimeout(scroll_frame, 0);
+        }
+
+        // boostrap the animation process
+        setTimeout(scroll_frame, 0);
+    }
+
+    var last_html = undefined;
+
+    /** Function count the occurrences of substring in a string;
+     * @param {String} string   Required. The string;
+     * @param {String} subString    Required. The string to search for;
+     * @param {Boolean} allowOverlapping    Optional. Default: false;
+     */
+    function occurrences(string, subString, allowOverlapping){
+
+        string+=""; subString+="";
+        if(subString.length<=0) return string.length+1;
+
+        var n=0, pos=0;
+        var step=(allowOverlapping)?(1):(subString.length);
+
+        while(true){
+            pos=string.indexOf(subString,pos);
+            if(pos>=0){
+                n++; pos+=step;
+            } else
+                break;
+        }
+        return(n);
+    }
+
+    function unescape1(data) {
+        return decodeURIComponent(escape(window.atob(data)))
+    }
+
+    var g_W;
+    var g_C;
+
+    /* TODO: highligh the W */
+    /* TODO: scroll to W exactly */
+    function setCursor(W, C) {
+        if (flag_manual) {
+            g_W = W;
+            g_C = C;
+            return;
+        }
+        W = unescape1(W);
+        var d = document.getElementById('out');
+        for (var i = 0; i < d.childNodes.length; i++) {
+            f = occurrences(d.childNodes[i].textContent, W, false);
+            C = C - f;
+            if (C <= 0) {
+                smooth_scroll_to(d.childNodes[i].offsetTop - window.outerHeight / 3, 500)
+                return;
+            }
+        }
+    }
+
+    // TODO: make this user configurable
+    // var g_foldType = "struct" | "stacked"
+    //var g_foldType = "struct";
+    var g_foldType = "stacked";
+
+    function setOutput(val) {
+        val = unescape1(val)
+        var out = document.getElementById('out');
+        out.innerHTML = val;
+        document.getElementById("mes").style.visibility="hidden";
+        restoreFoldStatuses();
+        setOnClickHandlerToHeaders();
+        window.onresize();
+    }
+
+    document.onwheel = function(x) {
+        if (!flag_manual) {
+            document.getElementById("mes").style.visibility="visible";
+            flag_manual = true;
+        }
+    }
+    document.onkeypress = function(x) {
+        if (x.keyCode == 40 /*Down*/ || x.keyCode == 38 /*Up*/)
+            if (!flag_manual) {
+                document.getElementById("mes").style.visibility="visible";
+                flag_manual = true;
+            }
+    }
+    window.onresize = function(x) {
+        var mes = document.getElementById("mes");
+        mes.style.marginLeft = (document.body.clientWidth - mes.offsetWidth - 30) + "px";
+    }
+
+    function scroll_automaticaly() {
+        flag_manual = false;
+        document.getElementById("mes").style.visibility="hidden";
+        setCursor(g_W,g_C);
+    }
+
+    function setOnClickHandlerToHeaders() {
+        var hs = ["H1", "H2", "H3", "H4", "H5", "H6", "H7"];
+        for (var i = 0; i < hs.length; i++) {
+            var es = document.getElementsByTagName(hs[i]);
+            if (es == null)
+                continue;
+            for (var ii = 0; ii < es.length; ii++) {
+                es[ii].addEventListener("click", onClickHandler, false);
+            }
+        }
+    }
+
+    var g_foldStatus = {};
+
+    // merge two objects. usable for "associate arrays"
+    // destination is modified in place and returned
+    // same keys in destination are overwritten by source
+    function merge(d, s) {
+        for (var p in s) {
+            if (s.hasOwnProperty(p)) {
+                d[p] = s[p];
+            }
+        }
+        return d;
+    }
+
+    function getHeaderPath(t) {
+        var p = [];
+        var headerLevel = t.nodeName[1];
+        p.push(t.id);
+        while ((t = t.previousElementSibling)) {
+            if (t.nodeName[0] == "H"
+                    && t.nodeName[1] < headerLevel) {
+                headerLevel = t.nodeName[1];
+                p.push(t.id);
+            }
+        }
+        return p;
+    }
+
+    function saveFoldStatus(t, i) {
+        var p = getHeaderPath(t);
+
+        var obj = Object();
+        obj[p.join("#")] = i;
+
+        merge(g_foldStatus, obj);
+    }
+
+    // manualFold: undefined, true, false
+    // headerLevel: 0 - visible, > 0 - how many times folded
+    // contentLevel: 0 - visible, > 0 - how many times folded
+
+    // t["fold"] = [manualFold, headerLevel, contentLevel];
+
+    function getFoldInfo(t) {
+        var i = t["fold"];
+        if (i == undefined) {
+            return {mf: undefined, hl: 0, cl: 0};
+        } else {
+            return i;
+        }
+    }
+    function setFoldInfo(t, i) {
+        t["fold"] = i;
+        saveFoldStatus(t, i);
+    }
+
+    function toggleStackedFoldInfo(i) {
+        if (i.mf == undefined) {
+            if (i.cl > 0) {
+                i.mf = false;
+            } else {
+                i.mf = true;
+            }
+        } else {
+            i.mf = !i.mf;
+        }
+        if (i.mf) {     // Folded
+            i.hl = 0;
+            i.cl = 1;
+        } else {        // Unfolded
+            i.hl = 0;
+            i.cl = 0;
+        }
+        return i;
+    }
+    function updateStackedFoldInfo(infoClickedHeader, infoHeader) {
+        infoHeader.hl = 0;
+        if (infoClickedHeader.mf) {
+            infoHeader.cl = 1;
+        } else {
+            if (infoHeader.mf) {
+                infoHeader.cl = 1;
+            } else {
+                infoHeader.cl = 0;
+            }
+        }
+        return infoHeader;
+    }
+    function toggleStructFoldInfo(i) {
+        if (i.mf == undefined) {
+            i.mf = true;
+        } else {
+            i.mf = !i.mf;
+        }
+        if (i.mf) {     // Folded
+            i.hl = 0;
+            i.cl = 1;
+        } else {        // Unfolded
+            i.hl = 0;
+            i.cl = 0;
+        }
+        return i;
+    }
+    function updateStructFoldInfo(infoClickedHeader, infoHeader) {
+        if (infoClickedHeader.mf) {
+            infoHeader.hl += 1;
+            infoHeader.cl += 1;
+        } else {
+            infoHeader.hl -= 1;
+            infoHeader.cl -= 1;
+        }
+        return infoHeader;
+    }
+    function applyFold(t, infoClickedHeader, updateFoldInfo) {
+        var headerLevel = t.nodeName[1];
+        var cl = infoClickedHeader.cl;
+
+        while ((t = t.nextElementSibling)
+                && (t.nodeName[0] != "H" || t.nodeName[1] > headerLevel)) {
+            if (t.nodeName[0] == "H") {
+                infoHeader = updateFoldInfo(infoClickedHeader, getFoldInfo(t));
+                setFoldInfo(t, infoHeader);
+                cl = infoHeader.cl;
+                t.style.display = infoHeader.hl > 0 ? "none" : "";
+            } else {
+                t.style.display = cl > 0 ? "none" : "";
+            }
+        }
+        return t;
+    }
+
+    function runHeaderPath(p, t, f) {
+        if (t == null) {
+            return;
+        }
+        if (p.length == 0) {
+            f(t);
+            return;
+        }
+        var id = p.pop();
+        while (t != null) {
+            if (t.id == id) {
+                runHeaderPath(p, t, f);
+                return;
+            }
+            t = t.nextElementSibling;
+        }
+    }
+    function finalElementFunc(i) {
+        return function X(t) {
+            setFoldInfo(t, i);
+            t.style.display = i.hl > 0 ? "none" : "";
+            while ((t = t.nextElementSibling)
+                    && t.nodeName[0] != "H") {
+                t.style.display = i.cl > 0 ? "none" : "";
+            }
+        }
+    }
+    function restoreFoldStatuses() {
+        var foldStatus = g_foldStatus;
+        g_foldStatus = {};
+
+        for (var p in foldStatus) {
+            if (foldStatus.hasOwnProperty(p)) {
+                var i = foldStatus[p];
+                var p = p.split("#");
+                var id = p.pop();
+                runHeaderPath(p, document.getElementById(id), finalElementFunc(i));
+            }
+        }
+    }
+
+    function onClickHandler() {
+        var t = this;
+
+        if (g_foldType == "struct") {
+            var infoClickedHeader = toggleStructFoldInfo(getFoldInfo(t));
+
+            setFoldInfo(t, infoClickedHeader);
+            applyFold(t, infoClickedHeader, updateStructFoldInfo);
+        } else if (g_foldType == "stacked") {
+            var infoClickedHeader = toggleStackedFoldInfo(getFoldInfo(t));
+
+            setFoldInfo(t, infoClickedHeader);
+            applyFold(t, infoClickedHeader, updateStackedFoldInfo);
+        }
+    }
+
+  </script>
+</head>
+<body>
+  <div id=page>
+    <div id=mes><input type="button" value="Scroll automatically" onclick=scroll_automaticaly() /></div>
+    <div id=out></div>
+  </div>
+</body>
+</html>
+
