---
title: "Your Title"
author: Your Name
title-slide-attributes:
data-background-image: ./assets/hearthstone.jpg
data-background-size: cover
data-background-opacity: 0.3
include-before: <div class="floatTR"><img src="assets/pandoc.png" height="32"/><img src="assets/revealjs.png" height="32"/></div>
numbersections: true
history: true
slideNumber: true
transition: slide
backgroundTransition: none
---
Space: next page，Arrow: navigation，F: fullscreen,EscorO: overview，Alt + mouse left：magnify，S：notes
::: incremental
- It converts Markdown...
- into a Presentation!
:::
. . .
The presentation is just a web page: README.html
it uses pandoc to convert markdown to presentation as html+reveal.js.
pandoc(markdown) -> html- pandoc: a markdown(, etc.) document converter
- reveal.js: a HTML presentation framework.
Usually use title to separate slides
For topic including several slides, you can use --- to separate slides.
To be continued...
Former title is Continued in this new slide by ---
- emphasized
- strong emphasis
deleted text- H
2O is a liquid. 2^10^ is 1024 - P
a\ cat Verbatim- *escape*
- [Custom style: smallest]{.smallest}
- [Custom style: dim]{.dim}
- [Custom style: invert]{.invert}
[see or edit ./custom.scss for your own custom style]{.smallest}
<style>
.smaller { font-size: 80% }
.smallest { font-size: 50% }
</style>[make single line smaller]{.smaller}
<div class="smaller">
whole block inside a page section
</div>
[or smallest by: ]{.smallest}
[make single line smallest]{.smallest}
<div class="smallest">
whole block inside a page section
</div>
[see or edit ./custom.scss for your own custom style]{.smallest}
press S to show the page note.
::: notes
this amazing comment on this page may help you a lot!
:::
{width=40%}
add background image by
Background Image {background-image="./assets/hearthstone.jpg"}custom style by adding data-state="bgdimmer"
Custom style Background {background-image="./assets/hearthstone.jpg" data-state="bgdimmer"}[see or edit ./custom.scss for your own custom style]{.smallest}
using <video>
using <iframe>, for better layout
Note: not all youtube video can be embeded, it depends on the uploader's setting.
add background vide by
Background Video {data-background-video="./assets/video.mp4"}add background vide by
Background Video {data-background-video="./assets/video.mp4" data-state="bgdimmer"}Embed anohter page, e.g., a complex interactive page by
<iframe src=assets/plot.html width="800" height="450"></iframe>- touch the embeded frame to interact with it,
- touch anywhere else to get focus back to revealjs.
see also pyecharts for how to generate this plot page
See the Next topic.
- one
- two
- three
- uno
- dos
- tres
(@) Hello. (@good) This is a good example.
As (@good) illustrates, ...
content before the pause
. . .
content after the pause
::: nonincremental
- Eat spaghetti
- Drink wine
:::
or
::: incremental
- Eat spaghetti
- Drink wine
:::
- Item 1
- Item 2
- Item 3
enable auto slide by {data-auto-animate="1"}
Animated lists:
- A
- C
- E
Animated div:
enable auto slide by {data-auto-animate="1"}
Animated lists:
- A
- B
- C
- D
- E
Animated div:
::: {.columns} ::: {.column width="40%"}
Column One
- hello
- world
::: ::: {.column width="60%"}
Column Two
{ width=50% }
::: :::
| Table | A | B | C |
|---|---|---|---|
| 1 | a1 | b1 | c1 |
| 2 | a2 | b2 | c2 |
| 3 | a3 | b3 | c3 |
- an unchecked task list item
- checked item
- MathJax basic tutorial and quick reference,
- Draw your LaTeX here,
- inline mode:
$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$ , - display mode:
$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
#include <iostream>
int main(int argc, char** argv) {
std::cout << "I'm c++!";
return 0;
}print("I'm Python!")Notice the pandoc and revealjs logo in the corner? Add it in the YAML metadata block (the start of this markdown)
---
include-before: <div class="floatTR"><img src="assets/pandoc.png" height="32"/><img src="assets/revealjs.png" height="32"/></div>
---See the Custom Build Settings page for more detail.
install pandoc first.
# mac
brew install pandoc:: windows
choco install pandoc- run ./build_presentation script,
- or execute in commandline:
pandoc README.md -t revealjs -s --css=custom.css --mathjax --template=pandoc-templates/default.revealjs -V revealjs-url=reveal.js --slide-level 3 -o README.htmladjust custom build settings in YAML metadata block (the start of this markdown)
---
numbersections: true
history: true
slideNumber: true
transition: slide
backgroundTransition: none
---or in the command line script:
pandoc README.md ... -V revealjs-url=reveal.js ... -o README.htmlthis template uses custom.css for custom style.
If you want to edit and rebuild custom.scss into custom .css, sass is required.
- install scss first
# mac
brew install sass/sass/sass:: windows
choco install sass- build custom.scss into custom.css
sass ./custom.scss ./custom.cssrun ./build script to build both css and presentation.
- In your browser
- add
?print-pdfto the url:file:///...README.html?print-pdf - Use your web browser to "print" the presentation web page to PDF.
Pandoc uses LaTeX to convert your markdown to PDF,
- install LaTeX here,
- in the head of this markdown file, make sure the metadata exists,
- make sure metadata's font name existed in your computer, otherwise, change it,
- run the build_pdf script