-
Notifications
You must be signed in to change notification settings - Fork 39
/
sample-dist.html
232 lines (198 loc) · 7.52 KB
/
sample-dist.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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CoderDeck Sample</title>
<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="dist/coderdeck-core.min.css" type="text/css">
<link rel="stylesheet" id='style-theme-link' href="dist/coderdeck.css" type="text/css" >
<script src='dist/jquery.min.js'></script>
<script src="dist/modernizr.js"></script>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='dist/jquery.min.js'>SCRIPTEND
</head>
<body>
CODE
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>
CODE
</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<article class='slide slide-subhead'>
<h1>CoderDeck</h1>
<h2><a href='http://github.com/cykod/CoderDeck'>http://github.com/cykod/CoderDeck</a><br/>
create interactive live-coding presentations for the web.<br/>
use the arrow-keys go between slides.
</h2>
</article>
<!-- Apply a class of "coder-editor" to a textarea to make it show up as runnable code -->
<article class='slide slide-list'>
<h2>Basic Code Editor</h2>
<p>Basic split code editor is created by adding a class of "coder-editor" to a textarea.
Press run, then modify some code and press "run" again</p>
<textarea class='coder-editor'>
<header>
<h1>My Site!</h1>
<nav><ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
</ul></nav>
</header>
<section id='content'>
<article class='blog-post'>
<h1>Blog Post 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
</article>
</section>
<footer>
<a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>
</textarea>
</article>
<article class='slide slide-list'>
<h2>How to use it?</h2>
<p>Download a release and modify the index.html with your slide. Slides are created with by adding a class='slide' to any element. CoderDeck areas are created
by adding a class of 'coder-editor' to a text area, for example (prettyprint is also bundled, so, as below just use a <pre class='prettyprint'>.. to highlight static code):</p>
<pre class='prettyprint'>
<article class='slide slide-list'>
<h2>This is a second level heading!</h2>
<p>Here is some descriptive text, followed by a split editor. </p>
<textarea class='coder-editor'>
<script>
alert("Yay!");
</script>
<textarea>
</article>
</pre>
</article>
<!-- Apply a class of "coder-editor-full" along with "coder-editor" to a textarea to make it show up as runnable code -->
<article class='slide slide-list'>
<h2>Full Page Code Editor</h2>
<p>Basic full page code editor is created by adding a class of "coder-editor-full" along with "coder-editor" to a textarea.
Press run, then press "back", then modify some code and press "run" again</p>
<textarea class='coder-editor coder-editor-full'>
<header>
<h1>My Site!</h1>
<nav><ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
</ul></nav>
</header>
<section id='content'>
<article class='blog-post'>
<h1>Blog Post 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
</article>
</section>
<footer>
<a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>
</textarea>
</article>
<!-- use a class of gist and a data-gist-id to pull the code example from a gist -->
<article class='slide slide-list'>
<h2>Pulling from Gists</h2>
<p>Use a class of 'gist' and an attribute of data-gist-id for the Gist ID</p>
<div class='gist' data-gist-classes='coder-editor coder-editor-full' data-gist-id='1262553'></div>
</article>
<!-- add a "data-coder-template" to use a different template (see the template definitions at the top)
add a "data-language" to use a different CodeMirror2 mode other than htmlmixed. Options include "html", "javascript", "css", "xml" and any other mode supported by CodeMirror2
-->
<article class='slide slide-list'>
<h2>Custom template and custom language</h2>
<p>You can create custom reusable templates for wrapping the editor code with custom <script> tags. You can also specify the mode the editor should display (xml, css, javascript or the default htmlmixed ) </p>
<textarea class='coder-editor' data-coder-template="coderdeck-style-example" data-language="css">
h1 { color:blue; }
h2 { color:red;}
p { color:pink;}
.stuff { color:purple;}
#my-div { color:teal;}
</textarea>
</article>
<!-- add a "data-coder-instant" to do on-the-fly updating-->
<article class='slide slide-list'>
<h2>Instant Update Sample</h2>
<p>Try modifying any of the HTML on the left, the right side should updated periodically as you type. This is done by adding a class of "coder-editor-instant" to the textarea</p>
<textarea class='coder-editor coder-editor-instant' data-coder-template="coderdeck-style-example" data-language="css">
h1 { color:blue; }
h2 { color:red;}
p { color:pink;}
.stuff { color:purple;}
#my-div { color:teal;}
</textarea>
</article>
<!-- Javascript works normally as well, libraries and external css (including jquery) can be included in template -->
<article class='slide slide-list'>
<h2>Javascript/jQuery Example</h2>
<p> Javascript works normally as well, libraries and external css (including jquery) can be included in the coderdeck template.</p>
<textarea class='coder-editor'>
<script>
$(function() {
$(".box").animate({
'top':"50%",
'left':"50%" });
});
</script>
<style>
.box {
top:0px; left:0px;
width:50px; height:50px;
position:absolute;
background-color:red;
}
</style>
<div class='box'></div>
</textarea>
</article>
<article class='slide slide-list'>
<h2>Local Storage</h2>
<p> If you want your changes to a slide to survive between page reloads you can define a data-save attribute which will save it to the attributes value in localstorage. Make a code change, hit run/save and reload this slide.</p>
<p> You can also use the same 'data-save' attribute on mulitiple slides to keep the same code moving forwad</p>
<textarea class='coder-editor' data-save='dummy'>
<h1>This is some dummy content..</h1>
</textarea>
</article>
<article class='slide slide-list'>
<h2>Solutions</h2>
<p>If you want to add a solution to an exercise, you can add a coderdeck-solution script tag in the slide </p>
<textarea class='coder-editor'>
<script>
// Display an alert message
// if a confirm dialog returns true
</script>
</textarea>
<script type='coder-solution'>
SCRIPT
if(confirm("Do you want an alert?")) {
alert("Yay!");
}
SCRIPTEND
</script>
</article>
<script src='dist/coderdeck.min.js'></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>