-
Notifications
You must be signed in to change notification settings - Fork 1
/
madoko.mdk
216 lines (144 loc) · 5.18 KB
/
madoko.mdk
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
[INCLUDE=presentation]
Title : Demo presentation in Madoko
Sub Title : In both HTML and PDF
Author : Daan Leijen
Affiliation : Microsoft Research
Email : [email protected]
Reveal Theme : sky
Beamer Theme : singapore
[TITLE]
# Content
[TOC]
# Madoko Presentation
Using [Madoko] it is easy to create beautiful presentations.
* [Html][slide]:
Uses the `Reveal.js` library by [Hakim El Hattab](http://hakim.se).\
This slide demo in Madoko is an adaption of his online demo.
* [Pdf][slide-pdf]:
Uses the `Beamer` package for LaTeX
* [Source][slide-mdk]:
Click to see the source of this presentation.
[madoko]: http://madoko.codeplex.com
## Reveal.js
`reveal.js` is a framework for easily creating beautiful presentations using
HTML. You'll need a browser with support for CSS 3D transforms to see it in
its full glory.
And any Madoko features just work. Here is some math:
~ Begin Framed { padding:1ex; margin-top:1ex }
A famous equation is $e = mc^2$, but this one is
famous too:
~ Equation {#eq-gaussian}
\int_{-\infty}^\infty e^{-a x^2} d x = \sqrt{\frac{\pi}{a}}
~
~ End Framed
~~ Notes
Oh hey, these are some notes. They'll be hidden in your presentation, but you
can see them if you open the speaker notes window (hit 's' on your keyboard).
~~
## Code
Here is code, highlighted by Madoko
``` javascript
function sqr( x ) {
var \(π\) = 3.141593;
return x*x; /* the square */
}
```
We used `\(` and `\)` to escape into markdown to write π.
<!-- Example of nested vertical slides -->
~ Begin Vertical { data-background:Gainsboro }
## Vertical Slides {#vertical}
Slides can be nested inside of other slides,
try pressing [down].
[![arrowdown]][down]
[down]: # { .navigate-down }
[arrowdown]: images/arrow.png "Down arrow" { width:178px; height:238px }
## Basement Level 1
Press down or up to navigate.
## Basement Level 2
Use `columns` to put blocks next to each other:
~ Begin Columns
~ Column { width:50% }
A monarch butterfly (shown to the right)
spends the winter in Mexico.
~
~ Column
![butterfly]
~
~ End Columns
[butterfly]: images/butterfly.png "A Monarch butterfly" { width:280px; vertical-align:middle }
<!--
For local background images, we need to have a reference to the image
such that it's data gets embedded into the HTML page. We define
it using "display=none" so it is hidden in the presentation.
We can then refer to the image in "data-background-image".
-->
![bfly]
[bfly]: images/butterfly.png "Butterfly" { display:none }
## Basement Level 3 { data-background-image:images/butterfly.png }
That's it, time to go back up.
[![arrowup]][back2]
[arrowup]: images/arrow.png "Up arrow" { width:178px; height:238px; transform:rotate(180deg) }
[back2]: #vertical { .image }
~ End Vertical
## Themes {#themes}
Reveal.js comes with a few themes built in:
* [Default](?#/themes)
* [Sky](?theme=sky#/themes)
* [Beige](?theme=beige#/themes)
* [Serif](?theme=serif#/themes)
* [Simple](?theme=simple#/themes)
* [Night](?theme=night#/themes)
* [Moon](?theme=moon#/themes)
* [Solarized](?theme=solarized#/themes)
Theme demos are loaded after the presentation which leads to flicker. In
production you should load your theme in the `<head>` using a
`<link>`.
## Transitions { #transitions }
You can select from different transitions, like:\
[Cube](?transition=cube#/transitions) -
[Page](?transition=page#/transitions) -
[Concave](?transition=concave#/transitions) -
[Zoom](?transition=zoom#/transitions) -
[Linear](?transition=linear#/transitions) -
[Fade](?transition=fade#/transitions) -
[None](?transition=none#/transitions) -
[Default](?#/transitions)
## Pauses?
Some pauses.
* {.fragment} One
* {.fragment} Two
* {.fragment} Three
And more:
- Test 1
- Test 2
- Test 3
{.fragmented}
Cool!.
~ Slide
A slide with no header
~
## Point of View
In Reveal.js Press **ESC** to enter the slide overview.
Hold down alt and click on any element to zoom in on it using
[zoom.js]. Alt + click anywhere to zoom back out.
[zoom.js]: http://lab.hakim.se/zoom-js
## Works in Mobile Safari
Try it out! You can swipe through the slides and pinch your way to the
overview.
## Printing
You can print a `revealjs` presentation nicely from the browser.
First give the `?print-pdf` or `?print-paper` query on your final
presentation (in the browser address bar) and then print from the Chrome
browser selecting `Save to PDF`.
Read more about it at the [revealjs documentation](https://github.com/hakimel/reveal.js#pdf-export)
## RevealJS library
Normally, the `revealjs` library is loaded from a CDN but you can specify your
own url using metadata:
Reveal Url: <my url>
This can be useful when using a [server to run revealjs](https://github.com/hakimel/reveal.js#full-setup)
where you may use something like:
@nopreview Reveal Url: http://localhost:8000/reveal.js
## Thanks for looking :-)
[slide]: http://research.microsoft.com/en-us/um/people/daan/madoko/samples/slidedemo/out/slidedemo.html
[slide-mdk]: https://www.madoko.net/editor.html?#url=http://research.microsoft.com/en-us/um/people/daan/madoko/samples/slidedemo/slidedemo.mdk&options={"delayedUpdate":"true"}
[slide-pdf]: http://research.microsoft.com/en-us/um/people/daan/madoko/samples/slidedemo/out/slidedemo.pdf