Tabs

Plugin for rendering content in tabs.

Example

All examples are part of the book source code.

Basic

Global

#![allow(unused)]
fn main() {
let a = 1 + 2;
}

a = 1 + 2

const a = 1 + 2;

Nested Tabs

Installation

cargo install mdbook-tabs

Configuration

Add the preprocessor to book.toml.

[preprocessor.tabs]

Add the additional CSS and JS files to the book with the following command.

mdbook-tabs install

Add the additional CSS and JS files to the HTML renderer in book.toml.

[output.html]
additional-css = ["theme/tabs.css"]
additional-js = ["theme/tabs.js"]

Usage

Define tabs as follows:

{{#tabs }}
{{#tab name="Tab 1" }}
**Tab content 1**
{{#endtab }}
{{#tab name="Tab 2" }}
_Tab content 2_
{{#endtab }}
{{#tab name="Tab 3" }}
~~Tab content 3~~
{{#endtab }}
{{#endtabs }}

The tabs can share a global state by adding a global string to the opening tag:

{{#tabs global="example" }}
{{#tab name="Tab 1" }}
Some content.
{{#endtab }}
{{#endtabs }}