Tabbed Content

Interactive tabbed content for multi-language code examples and comparisons

Tabbed Content

Tabs are perfect for showing multiple variations of the same concept, such as code examples in different programming languages or different approaches to solving a problem.

Basic Syntax

Create tabs using the :::tabs fence with == delimiters:

// Hello World in JavaScript
console.log('Hello, World!');
JAVASCRIPT
# Hello World in Python
print('Hello, World!')
PYTHON
// Hello World in Java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
Java

Multi-Language Examples

Tabs are especially useful for educational content where you want to show the same concept in different programming languages:

Functions Example

// Define a function
function greet(name) {
    return `Hello, ${name}!`;
}

// Call the function
console.log(greet('Alice'));
// Output: Hello, Alice!
JAVASCRIPT
# Define a function
def greet(name):
    return f'Hello, {name}!'

# Call the function
print(greet('Alice'))
# Output: Hello, Alice!
PYTHON
# Define a method
def greet(name)
  "Hello, #{name}!"
end

# Call the method
puts greet('Alice')
# Output: Hello, Alice!
RUBY
package main

import "fmt"

// Define a function
func greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

func main() {
    fmt.Println(greet("Alice"))
    // Output: Hello, Alice!
}
Go

Arrays and Loops

const numbers = [1, 2, 3, 4, 5];

// Using forEach
numbers.forEach(num => {
    console.log(num * 2);
});

// Using map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
JAVASCRIPT
numbers = [1, 2, 3, 4, 5]

# Using for loop
for num in numbers:
    print(num * 2)

# Using list comprehension
doubled = [num * 2 for num in numbers]
print(doubled)  # [2, 4, 6, 8, 10]
PYTHON
const numbers: number[] = [1, 2, 3, 4, 5];

// Using forEach
numbers.forEach((num: number) => {
    console.log(num * 2);
});

// Using map with type inference
const doubled: number[] = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
TYPESCRIPT

Tabs with Markdown Content

Tabs aren't limited to code - they can contain any markdown content:

Getting Started

This is a comprehensive guide to using our API. Choose a language tab above to see specific examples.

Key Features:

  • RESTful architecture
  • JSON responses
  • OAuth 2.0 authentication
  • Rate limiting: 1000 requests/hour

API Authentication

To authenticate, include your API key in the request header:

Header: Authorization: Bearer YOUR_API_KEY

Understanding Rate Limits

Our API implements the following rate limits:

Tier Requests per Hour Burst Limit
Free 100 10
Pro 1,000 50
Enterprise 10,000 200

If you exceed your rate limit, you'll receive a 429 Too Many Requests response.

Comparing Approaches

Use tabs to show different solutions to the same problem:

def factorial_iterative(n):
    """Calculate factorial using iteration"""
    result = 1
    for i in range(1, n + 1):
        result *= i
    return result

print(factorial_iterative(5))  # 120
PYTHON

Time Complexity: $O(n)$

Space Complexity: $O(1)$

Pros:

  • More memory efficient
  • No risk of stack overflow
  • Faster for large inputs
def factorial_recursive(n):
    """Calculate factorial using recursion"""
    if n <= 1:
        return 1
    return n * factorial_recursive(n - 1)

print(factorial_recursive(5))  # 120
PYTHON

Time Complexity: $O(n)$

Space Complexity: $O(n)$ due to call stack

Pros:

  • More intuitive and readable
  • Matches mathematical definition
  • Easier to understand
from functools import lru_cache

@lru_cache(maxsize=None)
def factorial_memoized(n):
    """Calculate factorial with memoization"""
    if n <= 1:
        return 1
    return n * factorial_memoized(n - 1)

print(factorial_memoized(5))  # 120
PYTHON

Time Complexity: $O(n)$ first call, $O(1)$ cached calls

Space Complexity: $O(n)$ for cache + call stack

Pros:

  • Best for repeated calculations
  • Combines elegance with performance
  • Automatic caching

Installation Instructions

Perfect for showing platform-specific instructions:

# Install using Homebrew
brew install nodejs

# Verify installation
node --version
npm --version
Bash
# Download installer from nodejs.org
# Or use Chocolatey
choco install nodejs

# Verify installation
node --version
npm --version
PowerShell
# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Fedora
sudo dnf install nodejs npm

# Verify installation
node --version
npm --version
Bash

Configuration Examples

Show different configuration file formats:

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.0",
    "dotenv": "^16.0.0"
  },
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}
JSON
name: my-project
version: 1.0.0

dependencies:
  express: ^4.18.0
  dotenv: ^16.0.0

scripts:
  start: node server.js
  dev: nodemon server.js
YAML
name = "my-project"
version = "1.0.0"

[dependencies]
express = "^4.18.0"
dotenv = "^16.0.0"

[scripts]
start = "node server.js"
dev = "nodemon server.js"
TOML

Accessibility Features

The tabs component is fully accessible:

steps

  1. Keyboard Navigation

    Use arrow keys (← →) to move between tabs, or Tab key to navigate through all interactive elements.

  2. Screen Reader Support

    All tabs have proper ARIA labels and roles for screen reader compatibility.

  3. Progressive Enhancement

    Tabs work with CSS-only (no JavaScript required), but JavaScript adds enhanced keyboard navigation.

  4. Focus Management

    Visual focus indicators show which tab is currently selected.

Best Practices

Try It Yourself

Create your own tabs by using this syntax:

:::tabs
== First Tab
Content for the first tab

== Second Tab
Content for the second tab
:::
Markdown

Experiment with different content types, code languages, and combinations to create rich, interactive learning experiences!