-
Notifications
You must be signed in to change notification settings - Fork 1
/
line escape markdown.html
149 lines (127 loc) · 3.29 KB
/
line escape markdown.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>line escape markdown</title>
<style>
body
{
font-size: 80%;
}
#source
{
white-space: pre;
margin-left: 20px;
font-family: monaco;
font-size: 7pt;
border: solid 1px #888;
}
#dump
{
white-space: pre;
}
#escaped
{
white-space: normal;
color: #888;
font-family: helvetica neue;
position: absolute;
z-index: 1;
color: red;
}
span
{
position: relative;
z-index: 2;
}
#line-3, #line-4, #line-5
{
opacity: 0.1;
}
#line-6
{
edisplay: inline-block;
margin-top: -4em;
}
#line-6, #line-15
{
border: solid 1px lime;
background-color: rgba(255, 255, 255, 0.9);
}
#offseter
{
margin-top: 40px;
}
#offseter2
{
margin-top: -20px;
}
</style>
</head>
<body>
<h1>line escape markdown</h1>
<pre>
have multiple lines
line1
line2
line3 ESCAPE
line4 ESCAPE
line5 ESCAPE
line6
the last line serving as margin-top offseter / downsetter
<script>
var i = 5
switch (i)
{
case 2 : document.write('2\n')
case 5 : document.write('5\n')
case (i > 3) : document.write('i sup 3\n')
case (i > 3 && (i&0)) : document.write('sup 3 and even\n')
case (i > 3 && (i&1)) : document.write('sup 3 and odd\n')
}
function keyup()
{
var sel = window.getSelection()
var str = ''
str += '\n' + event.keyCode
if (sel.type == 'Caret' || sel.type == 'Range')
{
var range = sel.getRangeAt(0)
var n = range.startContainer
while (n && !n.id) n = n.parentNode
str += '\n'
str += n ? ('id=' + n.id + ' offset=' + range.startOffset) : '**no parent node with an id**'
}
document.getElementById('dump').innerHTML = str
}
document.onkeyup = keyup
</script>
</pre>
<div contentEditable='true' id='source'>
<span id='line-1'>line 1, this is some text</span>
<span id='line-2'>line 2, this is some text</span><div id='escaped' contentEditable='false'>
<h3>Hello !</h3>
<b>world :) Ceci est un test</b>
</div>
<span id='line-3'>line 3, this is some text</span>
<span id='line-4'>line 4, this is some text</span>
<span id='line-5'>line 5, this is some text</span>
<div id='offseter' econtentEditable='false'></div><span id='line-6'>line 6, this is some text with a positive offset up</span>
<span id='line-7'>line 7, this is some text</span>
<span id='line-8'>line 8, this is some text</span>
<span id='line-9'>line 9, this is some text</span>
<span id='line-10'>line 10, this is some text</span>
<span id='line-11'>line 11, this is some text</span>
<span id='line-12'>line 12, this is some text</span>
<span id='line-13'>line 13, this is some text</span>
<span id='line-14'>line 14, this is some text</span>
<div id='offseter2' econtentEditable='false'></div><span id='line-15'>line 15, this is some text with a negative offset up</span>
<span id='line-16'>line 16, this is some text</span>
<span id='line-17'>line 17, this is some text</span>
<span id='line-18'>line 18, this is some text</span>
<span id='line-19'>line 19, this is some text</span>
<span id='line-20'>line 20, this is some text</span>
</div>
<div id='dump'></div>
</body>
</html>