quarto-revealjs-tabset/example.qmd at main · mcanouil/quarto-revealjs-tabset · GitHub

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
---
title: "Reveal.js Tabset"
subtitle: "Quarto Extension"
author:
  - name: "Mickaël CANOUIL, _Ph.D._"
    orcid: "0000-0002-3396-4549"
    url: "https://mickael.canouil.fr"
format:
  revealjs:
    output-file: index
    incremental: true
revealjs-plugins:
  - tabset
---

# Introduction

## What is Reveal.js Tabset?

This extension brings proper tabset support to Reveal.js presentations.

- Navigate through tabs using arrow keys or space bar.
- Tabs are treated as fragments.
- PDF export support.

## How it works

The plugin automatically detects panel tabsets in your slides and enables fragment-based navigation.

## Installation

Install the extension using:

```bash
quarto add mcanouil/quarto-revealjs-tabset@1.3.0
```

## Basic Setup

Add to your document YAML:

```yaml
format:
  revealjs: default
revealjs-plugins:
  - tabset
```

Tabs automatically appear on separate pages when exporting to PDF.
No additional configuration is needed.

# Basic Example

## Simple Tabset

:::: {.panel-tabset}

### Tab 1

This is the content of the first tab.

- Point 1.
- Point 2.
- Point 3.

### Tab 2

This is the content of the second tab.

- Different point 1.
- Different point 2.
- Different point 3.

### Tab 3

This is the content of the third tab.

**Bold text** and _italic text_.

:::

# Advanced Example

## Tabset with Fragments

:::: {.panel-tabset}

### Introduction

This tab contains fragments.

:::: {.fragment}
First fragment appears.
:::

:::: {.fragment}
Second fragment appears.
:::

### Details

More detailed information here.

- Item 1.
- Item 2.
- Item 3.

### Conclusion

Summary of the topic.

:::

# Features

## Key Features

1. **Fragment Navigation**: Tabs are treated as fragments, allowing smooth navigation.
2. **PDF Export**: Each tab appears on its own PDF page automatically.
3. **Multiple Tabsets**: Support for multiple tabsets per slide.
4. **Nested Fragments**: Fragments within tabs are properly indexed.

## Usage Tips

- Use arrow keys or space to navigate through tabs.
- Going backwards (left arrow) returns to the previous tab.
- Works seamlessly with Quarto's native tabset syntax.

# Thank You

## Questions?

Feel free to ask any questions about the Reveal.js Tabset extension.