https://github.com/coatless-quarto/tabby

Quarto Extension for Automatic Language Tabs
https://github.com/coatless-quarto/tabby

quarto quarto-extension tabs tabset-panels

Last synced: 24 days ago
JSON representation

Quarto Extension for Automatic Language Tabs

• Host: GitHub
• URL: https://github.com/coatless-quarto/tabby
• Owner: coatless-quarto
• Created: 2024-11-06T04:32:22.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-25T07:47:00.000Z (about 2 months ago)
• Last Synced: 2024-11-25T08:23:29.343Z (about 2 months ago)
• Topics: quarto, quarto-extension, tabs, tabset-panels
• Language: Lua
• Homepage: https://quarto.thecoatlessprofessor.com/tabby/
• Size: 13.7 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
> [!IMPORTANT]

>

> This extension may change further as it is developed. Please check back for updates.

# Tabby - Automatic Code Tabsets for Quarto 

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:

```bash

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:

```yaml

filters:

  - tabby

```

### Automatic Tabsets

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

````markdown

::: {.tabby}

```{python}

print("Hello, World!")

```

```javascript

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

```

```{r}

print("Hello, World!")

```

:::

````

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

### 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:

   ```markdown

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

   ...

   :::

   ```

3. **Document Level** - Set in YAML frontmatter:

   ```yaml

   tabby:

     default-tab: python

   ```

### Tab Groups

Synchronize tab selection across multiple tabsets using the `group` attribute, similar to [Quarto Tabsets](https://quarto.org/docs/output-formats/html-basics.html#tabset-groups):

````markdown

::: {.tabby group="mygroup"}

```python

def greet():

    print("Hello!")

```

```javascript

function greet() {

    console.log("Hello!");

}

```

:::

Some text in between...

::: {.tabby group="mygroup"}

```python

greet()

```

```javascript

greet();

```

:::

````

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

## 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:

```yaml

tabby:

  default-tab: python    # Default tab selection

```