Tabby Extension

Tabby is a Quarto extension that automatically creates tabsets for code blocks, making it easy to present multiple programming language implementations side by side. It leverages Quarto’s Tabset API to create an integrated tabbing experience.

Installation

To install Tabby, run the following command in your project directory:

quarto add coatless-quarto/tabby

This will install the extension under the _extensions subdirectory. If you’re using version control, you will want to check in this directory.

Usage

Setup

Add the filter to your document’s YAML header or your project’s _quarto.yml file:

filters:
  - tabby

Basic Example

Create a tabset by wrapping code blocks in a div with the tabby class:

::: {.tabby}
```{python}
print("Hello, Python World!")
```

```javascript
console.log("Hello, JavaScript World!");
```

```{r}
print("Hello, R World!")
```
:::

This will automatically create a tabset with three tabs: “Python”, “Javascript”, and “R”, each containing the respective code and, where applicable, its output.

Python

print("Hello, Python World!")

Hello, Python World!

Javascript

console.log("Hello, JavaScript World!");

R

print("Hello, R World!")

[1] "Hello, R World!"

Default Tab Selection

You can set the default selected tab in three ways, listed in order of precedence (highest to lowest):

1. URL Parameter - Add ?default-tab=python to your URL

   https://example.com/document.html?default-tab=python

2. Individual Tabset - Use div attributes:

   ::: {.tabby default-tab="javascript"}
   ...
   :::

3. Document Level - Set in YAML frontmatter:

   tabby:
     default-tab: python

Tab Groups

Synchronize tab selection across multiple tabsets using the group attribute, similar to Quarto Tabsets:

::: {.tabby group="mygroup"}
```{python}
def greet():
    print("Hello!")
```

```{r}
greet <- function() {
  cat("Hello!\n");
}
```
:::

Some text in between...

::: {.tabby group="mygroup"}
```{python}
greet()
```

```{r}
greet()
```
:::

When you switch tabs in one tabset, all tabsets in the same group will switch to the same language.

Python

def greet():
    print("Hello!")

R

greet <- function() {
  cat("Hello!\n");
}

Some text in between…

Python

greet()

Hello!

R

greet()

Hello!

Configuration Options

Option	Description	Default	Example
default-tab	Sets the default selected tab	1	python, r, javascript
group	Groups tabs across multiple tabsets	null	"mygroup"

Configure options in your document’s YAML frontmatter:

tabby:
  default-tab: python    # Default tab selection