Quarto Presentations

Create beautiful interactive slide decks with Reveal.js

Shafayet Khan Shafee

14 Jan, 2024

Hello, There

This presentation shows a few slides made by Quarto and Reveal.js along with header logo and header text which are easily embedded by using the Quarto filter reveal-header

Slide Backgrounds

This slide is created using the background attribute ({background="#43464B"}) and as you can see that header text color is different (difference is trivial though) than before.

if you want you can change the color of the header text for slides with background attribute using css class .inverse-header. For example,

.inverse-header {
  color: #c1c1c1 !important;
}

Here using !important is important :p.

Slide Backgrounds

Slide with bg color #43464B, used in .inverse-header

This slide contains a header div, therefore it has a header.

Executable Code

Codes with syntax highlighting and line numbers.

library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess")

Line Highlighting

Codes with specific line highlighted

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()

Quarto Presentations with beautiful slide decks made by RevealJs