Revealjs Presentation

Built with Quarto

Siyuan Wang

Sothern University of Science and Technology

July 13, 2025

Meet Revealjs & Quarto

Hello World! 你好, 世界!

This is a subtitle

This is an example of footnotes:

  • apple 1
    • banana 2
      • orange 3

Figure 1 is a mermaid example:

graph LR
A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Figure 1: This is a simple mermaid graph.

Callout Blocks

Here are some types of callout blocks

Callout Warning

This is the content of the callout block.

Callout Note

This is the content of the callout block.

Callout Important

This is the content of the callout block.

Callout Tip

This is the content of the callout block.

Callout Caution

This is the content of the callout block.

Alerts & Cross-refs

To emphasize specific words or text, you can:

  • Use the default .alert class, e.g. important note.
  • Use the .fg class for custom colour, e.g. important note.
  • Use the .bg class for custom background, e.g. important note.

Test cross-reference

Click below:

Section 1.3

Speaker notes and Incremental

Open speaker’s mode (press s key) to see the notes

Ordered and Unordered Lists

Here we have an unordered list.

  • first item
    • sub-item
      • second item

And next we have an ordered one.

  1. first item
    1. sub-item
    2. second sub-item
  2. second item

This page has no footer

This page has no footer


Add {footer=false} to the page header

This page has custom footer

This page has customized footer

Hello! Watch Me!

Pics & Videos & HTML

  • Simple figure without caption

XinBaoDao Dance

XinBaoDao Dance
Figure 2


  • Embed a video


  • Embed a HTML



SubFigs

As shownn the Figure 3, Figure 3 (a), Figure 3 (b)

(a) xinbaodao1
(b) xinbaodao2
Figure 3: Famous XinBaoDao

Tables

Table Usage

Table 1 is a regular table

Table 1: Demonstration of pipe table syntax
Default Left Right Center
12 12 12 12
123 123 123 123
1 1 1 1

Table 2 can adjust width

Table 2: Fruit prices
fruit price
apple 2.05
pear 1.37
orange 3.09

Table 3 creates table with python code chunk

Table 3: Astronomical object
Astronomical object R (km) mass (kg)
Sun 696,000 1.989e+30
Earth 6,371 5.972e+24
Moon 1,737 7.34e+22
Mars 3,390 6.39e+23

Subtables

Table 4: Main Caption
(a) First Table
Col1 Col2 Col3
A B C
E F G
A G G
(b) Second Table
Col1 Col2 Col3
A B C
E F G
A G G

See Table 4 for details, especially Table 4 (b).

Table 3 creates table with python code chunk with subfigures

Table 5: Example
(a) MPG
mpg cylinders displacement horsepower weight acceleration model_year origin name
18 8 307 130 3504 12 70 usa chevrolet chevelle malibu
15 8 350 165 3693 11.5 70 usa buick skylark 320
18 8 318 150 3436 11 70 usa plymouth satellite
16 8 304 150 3433 12 70 usa amc rebel sst
17 8 302 140 3449 10.5 70 usa ford torino
15 8 429 198 4341 10 70 usa ford galaxie 500
14 8 454 220 4354 9 70 usa chevrolet impala
14 8 440 215 4312 8.5 70 usa plymouth fury iii
14 8 455 225 4425 10 70 usa pontiac catalina
15 8 390 190 3850 8.5 70 usa amc ambassador dpl
(b) Taxis
pickup dropoff passengers distance fare tip tolls total color payment pickup_zone dropoff_zone pickup_borough dropoff_borough
2019-03-23 20:21:09 2019-03-23 20:27:24 1 1.6 7 2.15 0 12.95 yellow credit card Lenox Hill West UN/Turtle Bay South Manhattan Manhattan
2019-03-04 16:11:55 2019-03-04 16:19:00 1 0.79 5 0 0 9.3 yellow cash Upper West Side South Upper West Side South Manhattan Manhattan
2019-03-27 17:53:01 2019-03-27 18:00:25 1 1.37 7.5 2.36 0 14.16 yellow credit card Alphabet City West Village Manhattan Manhattan
2019-03-10 01:23:59 2019-03-10 01:49:51 1 7.7 27 6.15 0 36.95 yellow credit card Hudson Sq Yorkville West Manhattan Manhattan
2019-03-30 13:27:42 2019-03-30 13:37:14 3 2.16 9 1.1 0 13.4 yellow credit card Midtown East Yorkville West Manhattan Manhattan
2019-03-11 10:37:23 2019-03-11 10:47:31 1 0.49 7.5 2.16 0 12.96 yellow credit card Times Sq/Theatre District Midtown East Manhattan Manhattan
2019-03-26 21:07:31 2019-03-26 21:17:29 1 3.65 13 2 0 18.8 yellow credit card Battery Park City Two Bridges/Seward Park Manhattan Manhattan
2019-03-22 12:47:13 2019-03-22 12:58:17 0 1.4 8.5 0 0 11.8 yellow nan Murray Hill Flatiron Manhattan Manhattan
2019-03-23 11:48:50 2019-03-23 12:06:14 1 3.63 15 1 0 19.3 yellow credit card East Harlem South Midtown Center Manhattan Manhattan
2019-03-08 16:18:37 2019-03-08 16:26:57 1 1.52 8 1 0 13.3 yellow credit card Lincoln Square East Central Park Manhattan Manhattan

Code Blocks

  • Normal Code Block
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • Code Block with highlight
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Executable Code

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Equations, Citations

  • Einstein’s theory of special relatively that expresses the equivalence of mass and energy:

    \(E = mc^{2}\)

  • Input an inline equation: \(\mathbb {E}(x) = \int xf(x)dx\)

  • Cite a reference like (Peng et al. 2021).

Tabsets

Content for Tab A

Content for Tab B

Tow Columns

  • Column 1
    • apple
      • banana
  • Column 2
    • orange
      • watermelon


References



Peng, Xue Bin, Ze Ma, Pieter Abbeel, Sergey Levine, and Angjoo Kanazawa. 2021. “AMP: Adversarial Motion Priors for Stylized Physics-Based Character Control.” ACM Transactions on Graphics 40 (4): 1–20. https://doi.org/10.1145/3450626.3459670.