This repository has been archived by the owner on Jul 25, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 20
/
technical.html
214 lines (179 loc) · 8.54 KB
/
technical.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<head>
<title>demarcate.js 2.0.2 technical demo</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/demarcate.css">
<style type="text/css">
body, html { margin: 0; font-family: 'Open Sans', sans-serif; }
body { padding: 30px; }
div#container, div#output {
width: 42%;
padding: 2%;
margin: 70px auto;
float: left;
border: 1px solid #ccc;
overflow: hidden;
}
div#output {
background: #EEE;
color: #303030;
margin-left: 2%;
font-size: 0.9em;
line-height: 1.3;
}
.toc {
background: #EEE;
padding: 10px;
}
pre {
overflow-x: auto;
}
div#output strong, h1.header strong {
color: #D22;
}
h1.header {
position: absolute;
top: 0;
left: 0;
background: #303030;
color: white;
margin: 0;
padding: 10px;
display:block;
width: 100%;
max-width: 100%;
}
h3 { text-align: center; }
h4 { text-align: right; }
</style>
</head>
<body>
<h1 class="header">demarcate<strong>.js</strong> technical demo page</h1>
<div id="container">
<h1>Table of contents</h1>
<div class="toc">
<ul>
<li><a href="#supported-elements">Supported Elements</a></li>
<li><a href="#partially-supported-elements">Partially Supported Elements</a></li>
<li><a href="#unsupported-elements">Unsupported Elements</a></li>
</ul>
</div>
<p><strong>Note</strong>:<br /> A <code>div</code> with class <code>toc</code> is automatically converted to a <code>TOC</code> Markdown tag</p>
<h2 id="supported-elements">Supported Elements</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Some more text</p>
<blockquote>
<p>A <code>blockquote</code> with some further <strong>strong</strong> and <em>em'd</em> text to test our capabilities.</p>
</blockquote>
<p>
Some text <a href="asdf.html">with embedded link</a> and more text,
and even some images: <img src="http://placehold.it/150x150" alt="placeholder image" title="a title">
</p>
<ul>
<li>What about lists? </li>
<li>Even some <a href="index.html">links inside lists</a>?</li>
<li>At least a couple of items</li>
</ul>
<ol>
<li>You can also do ordered lists!</li>
<li>Just use the two toolbar buttons</li>
<li>To select between ordered list or unordered list</li>
</ol>
<hr>
<h2 id="partially-supported-elements">Partially Supported Elements</h2>
<h3>Footnotes<sup id="fnref:a"><a class="footnote-ref" href="#fn:a" rel="footnote">1</a></sup></h3>
<p>
Footnote support is based on the footnotes generated by the
<a href="http://packages.python.org/Markdown/extensions/footnotes.html">Python footnote extension</a>.
Footnotes are converted to Markdown but there is no specific editing sytnax for adding them.
To add footnotes, simply create a footnote reference in your text - e.g. <code>[^1]</code> and
then at the bottom of your document define this in another paragraph block. <code>[^1]: a footnote</code>.
</p>
<p>
These will not be rendered as footnotes by demarcate.js, instead the Markdown will be preserved and
your server should handle this rendering. Note that as long as footnotes have the correct tags
(e.g. footnote references are in a <code>sup</code> tag with a <code><div class="footnote"></code>
wrapping your ordered list of footnotes, then Markdown footnotes can be generated from HTML.
</p>
<p>
<blockquote>
<strong>Note, currently footnotes text can't be edited as it strips away the footnote references.</strong>
</blockquote>
</p>
<h3>Tables</h3>
<p>
Tables cells can be edited, however new rows cannot be added Only tables with
a top row header and <code>colspan</code> and <code>rowspan</code> of 1 are supported.
</p>
<table>
<thead>
<tr><th>Item 1 - various lengths</th><th>Item 2</th></tr>
</thead>
<tbody>
<tr><td>Item A1</td><td>But not currently colspans</td></tr>
<tr><td>Item B1</td><td>Item B2</td></tr>
<tr><td>Item C1</td><td>(<strong>or</strong> rowspans)</td></tr>
</tbody>
</table>
<h3>Source Code</h3>
<p>
Markdown is returned but editing not currently possible
</p>
<div class="codehilite">
<pre><span class="c1">// select all "div" elements <div></span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"div"</span><span class="p">)</span>
<span class="c1">// select all "div" elements with class "myclass" e.g <div class="myclass"></span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"div.myclass"</span><span class="p">)</span>
<span class="c1">// select any element with id "myid" (e.g. <h1 id="myid"></span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#myid"</span><span class="p">)</span>
<span class="c1">// select only the "div" element with the id "myid" - i.e.</span>
<span class="c1">// will ignore <h1 id="myid"></span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"div#myid"</span><span class="p">)</span></pre>
</div>
<div class="footnote">
<hr />
<ol>
<li id="fn:a">
<p>Footnotes are currently managed by adding footnote Markdown inside paragraph blocks <a class="footnote-backref" href="#fnref:a" rev="footnote" title="Jump back to footnote 1 in the text">^</a></p>
</li>
</ol>
</div>
</div>
<div id="output">
<h2>Usage Notes</h2>
<ul>
<li>Edit items in the left hand section</li>
<li>Use the tool bar on the right hand side to manage formatting styles</li>
<li>Try it in a mobile browser as well!</li>
</ul>
</div>
<!-- jQuery imported for DOM manipulations but not required -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Include demarcate.js -->
<script src="bin/demarcate.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* The following code is all that is required to get demarcate running
* on your web page. To get the rendered output you can call demarcate()
* on any div.
*/
$(document).ready( function() {
// Enable all whitelisted elements in the '#container' dom element
// for demarcation.
demarcate.enable($('#container').get(0));
// bind a handler to the 'demarcate_editor_closed' event. This allows
// the rendered markdown to be immediately placed in the '#output' div.
// new lines are replaced with <br> tags for rending in browser
$(document).on('demarcateEditorUpdated', function(e, elem) {
var op = demarcate.parse();
console.log("Writing output");
$("#output").html($("<pre />", {text: op}));
});
});
</script>
</body>
</html>