-
Notifications
You must be signed in to change notification settings - Fork 9
/
original.html
486 lines (405 loc) · 11.3 KB
/
original.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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="remark,remarkjs,markdown,slideshow,presentation" />
<meta name="description" content="A simple, in-browser, markdown-driven slideshow tool." />
<title>Remark</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body {
font-family: 'Droid Serif';
font-size: 20px;
}
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
margin-bottom: 0;
}
h1 { font-size: 4em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }
.footnote {
position: absolute;
bottom: 3em;
}
li p { line-height: 1.25em; }
.red { color: #fa0000; }
.large { font-size: 2em; }
a, a > code {
color: rgb(249, 38, 114);
text-decoration: none;
}
code {
-moz-border-radius: 5px;
-web-border-radius: 5px;
background: #e7e8e2;
border-radius: 5px;
font-size: 16px;
}
.pull-left {
float: left;
width: 47%;
}
.pull-right {
float: right;
width: 47%;
}
.pull-right ~ p {
clear: both;
}
#slideshow .slide .content code {
font-size: 0.8em;
}
#slideshow .slide .content pre code {
font-size: 0.9em;
padding: 15px;
}
.inverse {
background: #272822;
color: #777872;
text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2 {
color: #f3f3f3;
line-height: 0.8em;
}
/* Slide-specific styling */
#slide-inverse .footnote {
bottom: 12px;
left: 20px;
}
#slide-how .slides {
font-size: 0.9em;
position: absolute;
top: 151px;
right: 140px;
}
#slide-how .slides h3 {
margin-top: 0.2em;
}
#slide-how .slides .first, #slide-how .slides .second {
padding: 1px 20px;
height: 90px;
width: 120px;
-moz-box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
}
#slide-how .slides .first {
background: #fff;
position: absolute;
top: 20%;
left: 20%;
z-index: 1;
}
#slide-how .slides .second {
position: relative;
background: #fff;
z-index: 0;
}
/* Two-column layout */
.left-column {
color: #777;
width: 20%;
height: 92%;
float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
color: #000;
}
.right-column {
width: 75%;
float: right;
padding-top: 2em;
}
</style>
</head>
<body>
<textarea id="source">
name: inverse
layout: true
class: center, middle, inverse
---
#remark
[ri-mahrk]
.footnote[Go to directly to [project site](https://github.com/gnab/remark)]
---
## What is it and why should I be using it?
---
layout: false
.left-column[
## What is it?
]
.right-column[
A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
- Markdown formatting, with smart extensions
- Presenter mode, with cloned slideshow view
- Syntax highlighting, supporting a range of languages
- Slide scaling, thus similar appearance on all devices / resolutions .red[*]
- Touch support for smart phones and pads, i.e. swipe to navigate slides
.footnote[.red[*] At least browsers try their best]
]
---
.left-column[
## What is it?
## Why use it?
]
.right-column[
If your ideal slideshow creation workflow contains any of the following steps:
- Just write what's on your mind
- Do some basic styling
- Easily collaborate with others
- Share with and show to everyone
Then remark might be perfect for your next.red[*] slideshow!
.footnote[.red[*] You probably want to convert existing slideshows as well]
]
---
.left-column[
## What is it?
## Why use it?
]
.right-column[
As the slideshow is expressed using Markdown, you may:
- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where
As the slideshow is actually an HTML document, you may:
- Display it in any decent browser
- Style it using regular CSS, just like any other HTML content
- Use it offline!
As the slideshow is contained in a plain file, you may:
- Store it wherever you like; on your computer, hosted from your Dropbox, hosted on Github Pages alongside the stuff you're presenting...
- Easily collaborate with others, keeping track of changes using your favourite SCM tool, like Git or Mercurial
]
---
template: inverse
## How does it work, then?
---
name: how
.left-column[
## How does it work?
### - Markdown
]
.right-column[
A Markdown-formatted chunk of text is transformed into individual slides by JavaScript running in the browser:
```remark
# Slide 1
This is slide 1
---
# Slide 2
This is slide 2
```
.slides[
.first[
### Slide 1
This is slide 1
]
.second[
### Slide 2
This is slide 2
]
]
Regular Markdown rules apply with only a single exception:
- A line containing three dashes constitutes a new slide
(not a horizontal rule, `<hr />`)
Have a look at the [Markdown website](http://daringfireball.net/projects/markdown/) if you're not familiar with Markdown formatting.
]
---
.left-column[
## How does it work?
### - Markdown
### - Inside HTML
]
.right-column[
A simple HTML document is needed for hosting the styles, Markdown and the generated slides themselves:
```xml
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Slideshow styles */
</style>
</head>
<body>
<textarea id="source">
<!-- Slideshow Markdown -->
</textarea>
<script type="text/javascript" src="remark.js">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>
```
You may download remark to have your slideshow not depend on any online resources, or reference the [latest version](https://github.com/gnab/remark/releases) online directly.
]
---
template: inverse
## Of course, Markdown can only go so far.
---
.left-column[
## Markdown extensions
]
.right-column[
To help out with slide layout and formatting, a few Markdown extensions have been included:
- Slide properties, for naming, styling and templating slides
- Content classes, for styling specific content
- Syntax highlighting, supporting a range of languages
]
---
.left-column[
## Markdown extensions
### - Slide properties
]
.right-column[
Initial lines containing key-value pairs are extracted as slide properties:
```remark
name: agenda
class: middle, center
# Agenda
The name of this slide is {{ name }}.
```
Slide properties serve multiple purposes:
* Naming and styling slides using properties `name` and `class`
* Using slides as templates using properties `template` and `layout`
* Expansion of `{{ property }}` expressions to property values
See the [complete list](https://github.com/gnab/remark/wiki/Slide-Properties) of slide properties.
]
---
.left-column[
## Markdown extensions
### - Slide properties
### - Content classes
]
.right-column[
Any occurences of one or more dotted CSS class names followed by square brackets are replaced with the contents of the brackets with the specified classes applied:
```remark
.footnote[.red.bold[*] Important footnote]
```
Resulting HTML extract:
```xml
<span class="footnote">
<span class="red bold">*</span> Important footnote
</span>
```
]
---
.left-column[
## Markdown extensions
### - Slide properties
### - Content classes
### - Syntax Highlighting
]
.right-column[
Code blocks can be syntax highlighted by specifying a language from the set of [supported languages](https://github.com/gnab/remark/wiki/Configuration-Options#wiki-highlighting).
Using [GFM](http://github.github.com/github-flavored-markdown/) fenced code blocks you can easily specify highlighting language:
.pull-left[
```javascript
function add(a, b)
return a + b
end
```
]
.pull-right[
```ruby
def add(a, b)
a + b
end
```
]
A number of highlighting [styles](https://github.com/gnab/remark/wiki/Configuration-Options#wiki-highlighting) are available, including several well-known themes from different editors and IDEs.
]
---
.left-column[
## Presenter mode
]
.right-column[
To help out with giving presentations, a presenter mode comprising the
following features is provided:
- Display of slide notes for the current slide, to help you remember
key points
- Display of upcoming slide, to let you know what's coming
- Cloning of slideshow for viewing on extended display
]
---
.left-column[
## Presenter mode
### - Inline notes
]
.right-column[
Just like three dashes separate slides,
three question marks separate slide content from slide notes:
```
Slide 1 content
???
Slide 1 notes
---
Slide 2 content
???
Slide 2 notes
```
Slide notes are also treated as Markdown, and will be converted in the
same manner slide content is.
Pressing __P__ will toggle presenter mode.
]
???
Congratulations, you just toggled presenter mode!
Now press __P__ to toggle it back off.
---
.left-column[
## Presenter mode
### - Inline notes
### - Cloned view
]
.right-column[
Presenter mode of course makes no sense to the audience.
Creating a cloned view of your slideshow lets you:
- Move the cloned view to the extended display visible to the audience
- Put the original slideshow in presenter mode
- Navigate as usual, and the cloned view will automatically keep up with the original
Pressing __C__ will open a cloned view of the current slideshow in a new
browser window.
]
---
template: inverse
## It's time to get started!
---
.left-column[
## Getting started
]
.right-column[
Getting up and running is done in only a few steps:
1. Visit the [project site](http://github.com/gnab/remark)
2. Follow the steps in the Getting Started section
For more information on using remark, please check out the [wiki](https://github.com/gnab/remark/wiki) pages.
]
---
name: last-page
template: inverse
## That's all folks (for now)!
Slideshow created using [remark](http://github.com/gnab/remark).
</textarea>
<script src="http://gnab.github.com/remark/downloads/remark-0.5.9.min.js" type="text/javascript"></script>
<script type="text/javascript">
var hljs = remark.highlighter.engine;
</script>
<script src="remark.language.js" type="text/javascript"></script>
<script type="text/javascript">
var slideshow = remark.create({
highlightStyle: 'monokai',
highlightLanguage: 'remark'
}) ;
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-44561333-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>