T11d Code Tab Switching Smoke Test

Rendering verification for T11d. Demonstrates the three common scenarios where the tab shortcode combines with code blocks. If switching tabs does not switch the code block, the :checked+label+.shortcode-tab-item selector in tab.css isn’t taking effect.

1. Cross-platform command switching (macOS / Windows / Linux)

The most common usage — same goal, different shells, different commands.

podman compose exec openclaw-gateway \
  node dist/index.js channels login --channel feishu

podman compose exec openclaw-gateway `
  node dist/index.js channels login --channel feishu

sudo podman compose exec openclaw-gateway \
  node dist/index.js channels login --channel feishu

Scan the generated QR code with the companion app to continue configuration.

2. Multi-language code samples (same algorithm)

Useful for the “same concept, different languages” explainer pattern.

def gcd(a: int, b: int) -> int:
    while b:
        a, b = b, a % b
    return a

function gcd(a: number, b: number): number {
  while (b !== 0) {
    [a, b] = [b, a % b];
  }
  return a;
}

func gcd(a, b int) int {
    for b != 0 {
        a, b = b, a%b
    }
    return a
}

fn gcd(mut a: u64, mut b: u64) -> u64 {
    while b != 0 {
        let t = b;
        b = a % b;
        a = t;
    }
    a
}

3. Multi-format config switching (YAML / TOML / JSON)

The “pick whichever format you like” style of config example.

server:
  host: 0.0.0.0
  port: 8080
channels:
  - name: feishu
    enabled: true

[server]
host = "0.0.0.0"
port = 8080

[[channels]]
name = "feishu"
enabled = true

{
  "server": { "host": "0.0.0.0", "port": 8080 },
  "channels": [{ "name": "feishu", "enabled": true }]
}

4. tab + highlight shortcode (with title bar)

If you want a title bar on the code block (Hugo’s highlight shortcode provides one), swap the fenced block for {{< highlight >}}:

DATABASE_URL=postgres://localhost:5432/inkstone_dev
DEBUG=true
LOG_LEVEL=debug

DATABASE_URL=postgres://prod-db:5432/inkstone
DEBUG=false
LOG_LEVEL=warn

Self-check list

• Tab switch: clicking different labels switches the code block (CSS only, no JS)
• Active state: the current tab’s label has a 2px underline
• Nesting: both fenced code blocks and {{< highlight >}} render correctly
• Emoji label: 🍎 / 🪟 / 🐧 renders correctly
• position attribute: section 3 uses position="start"; labels align to the start
• Dark mode: after switching to dark, the underline color swaps (--color-shortcode-tab-label-bottom)