Author: Yuan Chang
Scroll right → to see the examples.
Scroll down ↓ to see an auto-generated outline.
title-hidden: Fit
fit:
- Hello My Friends!
- Longer title become smaller~
- Here comes the THRID LINE!!
- ---
- This is actually the "Fit" page, check the table of content!
This title is invisible in the table of content. Same as its section.
title-only: Title Only
Something important.
| item 1 | item 2 |
|---|---|
| A | B |
import sys
print(sys.path)
for i in range(10):
print("Hello World!")
doc: |
*Something* **important**.
| item 1 | item 2 |
|:------:|:------:|
| A | B |
```python[1-2]
import sys
print(sys.path)
for i in range(10):
print("Hello World!")
```
+ Item
+ [Next page](#/doc-src)
img:
label: Kitten 🐱
src: https://placekitten.com/600/400
Multiple images will be placed horizontally.
img:
- label: Kitten 1
src: https://placekitten.com/700/500
pop: true
- label: Kitten 2
src: https://placekitten.com/800/500
pop: true
Laid images will be placed at the same center.
lay-img:
- src: https://placekitten.com/450/450
frag: fade-right
- src: https://placekitten.com/600/300
frag: fade-left
The videos can be placed as same as the images.
video:
- width: 320
height: 240
src: https://www.w3schools.com/html/movie.mp4
- src: https://www.w3schools.com/html/movie.mp4
controls: false
Inline math text $x_a^*$ and $x_b^*$.
doc: Inline math text $x_a^\*$ and $x_b^\*$.
math: |
\small\begin{aligned}
\min_{x_1, x_2}&f(x)
\\
\text{s.t.}\,&b(x) \le 0
\\
&c(x) = 0
\end{aligned}
Override global setting, use a single color background.
trans: convex-in convex-out
background: rgb(70, 70, 255)
🐳🐳🐳
Override global setting, use a local background.
class: left-align
bg-trans: fade-in fade-out
background:
src: https://placekitten.com/800/800
size: 25%
opacity: 0.5
This page has a “left-align” class, and “text-align: left” has been set for “.left-align p”. So all the pargraphs are left aligned.
“Id“s are also work, but the page id will be replaced.
.left-align p {
text-align: left;
}
📖 style 📖 id 📖 class 📖 background (global) 📖 background
h-stack:
- doc: |
*Data types*
+ sturct
+ enum
+ union
- math: \small \frac{-b\pm \sqrt{b^2 - 4ac}}{2a}
- img: { src: https://placekitten.com/600/600 }
Data types
h-stack:
- v-stack:
- h-stack:
- doc: Left Top Left
- doc: Left Top Right
- doc: Left Bottom
- v-stack-border:
- doc: Right Top
- h-stack-border:
- doc: Right Bottom Left
- doc: Right Bottom Right
📖 h-stack-border 📖 v-stack-border
Left Top Left
Left Top Right
Left Bottom
Right Top
Right Bottom Left
Right Bottom Right
Auto animation is suggested for the most simple cases.
Enable this option for two continuous slides, the animation will be generated automatically.
title: Auto Animate
auto-animate: true
Move
title: Auto Animate
auto-animate: true
Move
Smoothly
The index of fragment is the order of the animation.
The blank represents normal class="framgment" effect.
h-stack:
- doc: AAA
math: f(x)
frag: [ { doc: ~, math: ~ } ] # one action
- doc: BBB
math: g(y)
frag: [ { doc: ~ }, { math: ~ } ] # two action
- doc: CCC
math: h(z)
frag: [ { math: ~ } ] # one element
AAA
\[f(x)\]BBB
\[g(y)\]CCC
\[h(z)\]docsv-stack:
- doc: Since there is only one `doc`,
frag: &frag [ { doc: ~ } ]
- doc: so it may splitted by `v-stack`.
frag: *frag
- doc: The anchors can be used on `frag` array.
frag: *frag
Since there is only one doc,
so it may splited by v-stack.
The anchors can be used on frag array.
Press “s” key to open speaker’s view.
note: |
Note text here!
There are also have **markdown** *syntax*!
YAML anchor can be used in the content data.
Anchors will be only resolve twice,
which not allow to serializing self-loop in anchor chain.
h-stack-border:
- &stack
v-stack:
- &map
doc: &doc Same content here!
- doc: *doc
- *map
- *stack
Same content here!
Same content here!
Same content here!
Same content here!
Same content here!
Same content here!
The third-party plugins can be loaded from metadata.
plugin:
RevealNotes:
- plugin/notes/notes.js
Will be converted to:
<script src="/plugin/notes/notes.js"></script>
Reveal.initialize({
plugins: [..., RevealNotes],
...
});