static: add pandoc-preview.html
This commit is contained in:
parent
70b21105a0
commit
8cbb711236
1 changed files with 423 additions and 0 deletions
423
static/pandoc-preview.html
Normal file
423
static/pandoc-preview.html
Normal file
|
|
@ -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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue