-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
114 lines (106 loc) · 3.55 KB
/
index.html
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ css }}
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 20px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
pre code.hljs {
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<div id="preview" class="markdown-body">Text Preview</div>
</div>
</body>
{{ js }}
<script type="text/javascript">
$(function() {
var extension = {
mermaid: typeof extension !== "undefined" ? extension.mermaid: false
}
const highlight = markedHighlight.markedHighlight({
async: false,
langPrefix: "hljs language-",
highlight(code, lang, info) {
if ((lang || "").match(/^mermaid/)) {
return code;
}
return hljs.highlightAuto(code).value;
}
});
const renderer = highlight.renderer;
highlight.renderer = {
code(code, lang, escaped) {
if ((lang || "").match(/^mermaid/)) {
extension.mermaid = true;
return '<div class="mermaid">' + code + '</div>';
}
return renderer.code(code, lang, escaped);
}
};
marked.use(highlight);
var ws = new WebSocket('ws://{{ websocket }}');
ws.onopen = function () {
ws.send("I'm connected");
};
ws.onclose = function (event) {
window.open('', '_self', '');
window.close();
};
ws.onmessage = function (event) {
if (event.data.endsWith("<!-- iframe -->")) {
var iframe = document.createElement("iframe");
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.position = "absolute";
iframe.style.border = "none";
$("#preview").html(iframe)
var frameDoc = iframe.document;
if(iframe.contentWindow) {
frameDoc = iframe.contentWindow.document; // IE
}
frameDoc.open();
frameDoc.writeln(event.data);
frameDoc.close();
var iframeContent = $("iframe").contents();
var position = iframeContent.find("#position-percentage").html();
if (position) {
iframeContent.scrollTop(scroll = iframeContent.height() * (position / 100));
/* iframe.contentWindow.scrollTo({top:iframeContent.height() * (position / 100), behavior: 'smooth'}); */
/* iframe.animate({ scrollTop: iframeContent.height() * (position / 100)}, 300); */
}
$("body").css("margin","0")
$("body").css("padding","0")
} else {
$("#preview").html(marked.parse(event.data))
if (extension.mermaid) {
mermaid.init();
}
var position = $("#position-percentage").html();
if (position) {
$("html, body").animate({ scrollTop: $(document).height() * (position / 100)}, 300);
}
}
};
ws.onerror = function (event) {
console.log(event);
};
});
</script>
</html>