Code Tabs Multi-Language Code Tabs Usage Guide

Table of Contents

Quick Start Specifying the Default Language Using title to Customize Tab Names Real-World Examples Example 1: HTTP Requests Example 2: Reading Files Example 3: React / Vue / Svelte Component Comparison Language Preference Memory Syntax Reference

546 words

3 minutes

Code Tabs Multi-Language Code Tabs Usage Guide

2026-08-10

Examples

Demo

/

Markdown

HHLBlog has added a Code Tabs feature that lets you display implementations in multiple programming languages within a single code block, with readers switching freely via tabs. It’s especially suited for technical blog posts that need to compare how different languages/frameworks write things.

Quick Start#

Use the :::code-tabs container directive to wrap multiple fenced code blocks; each code block’s language is automatically detected and displayed as a tab label:

1
// JavaScript
2
function greet(name) {
3
  return `Hello, ${name}!`;
4
}
5
console.log(greet("World"));

1
// TypeScript
2
function greet(name: string): string {
3
  return `Hello, ${name}!`;
4
}
5
console.log(greet("World"));

The syntax is very simple — just like writing fenced code blocks normally, except you wrap them with :::code-tabs.

Specifying the Default Language#

Use the default attribute to preset which tab is displayed by default:

1
#include <stdio.h>
2

3
int main() {
4
    int arr[] = {1, 2, 3, 4, 5};
5
    int sum = 0;
6
    for (int i = 0; i < 5; i++) {
7
        sum += arr[i];
8
    }
9
    printf("Sum: %d\n", sum);
10
    return 0;
11
}

1
#include <iostream>
2
#include <vector>
3
#include <numeric>
4

5
int main() {
6
    std::vector<int> arr = {1, 2, 3, 4, 5};
7
    int sum = std::accumulate(arr.begin(), arr.end(), 0);
8
    std::cout << "Sum: " << sum << std::endl;
9
    return 0;
10
}

1
fn main() {
2
    let arr = [1, 2, 3, 4, 5];
3
    let sum: i32 = arr.iter().sum();
4
    println!("Sum: {}", sum);
5
}

1
package main
2

3
import "fmt"
4

5
func main() {
6
    arr := []int{1, 2, 3, 4, 5}
7
    sum := 0
8
    for _, v := range arr {
9
        sum += v
10
    }
11
    fmt.Printf("Sum: %d\n", sum)
12
}

Using title to Customize Tab Names#

You can customize the display name of a tab via the title attribute of a fenced code block:

1
npm install lodash

1
yarn add lodash

1
pnpm add lodash

1
bun add lodash

Real-World Examples#

Example 1: HTTP Requests#

1
fetch("https://api.example.com/users")
2
  .then((res) => res.json())
3
  .then((data) => console.log(data))
4
  .catch((err) => console.error(err));

1
import axios from "axios";
2

3
const { data } = await axios.get("https://api.example.com/users");
4
console.log(data);

1
import requests
2

3
res = requests.get("https://api.example.com/users")
4
print(res.json())

1
package main
2

3
import (
4
    "encoding/json"
5
    "fmt"
6
    "net/http"
7
)
8

9
func main() {
10
    resp, _ := http.Get("https://api.example.com/users")
11
    defer resp.Body.Close()
12
    var data interface{}
13
    json.NewDecoder(resp.Body).Decode(&data)
14
    fmt.Println(data)
15
}

Example 2: Reading Files#

1
with open("data.txt", "r") as f:
2
    content = f.read()
3
    print(content)

1
import { readFile } from "node:fs/promises";
2

3
const content = await readFile("data.txt", "utf-8");
4
console.log(content);

1
use std::fs;
2

3
fn main() {
4
    let content = fs::read_to_string("data.txt")
5
        .expect("Failed to read file");
6
    println!("{}", content);
7
}

1
package main
2

3
import (
4
    "fmt"
5
    "os"
6
)
7

8
func main() {
9
    data, err := os.ReadFile("data.txt")
10
    if err != nil {
11
        panic(err)
12
    }
13
    fmt.Print(string(data))
14
}

Example 3: React / Vue / Svelte Component Comparison#

1
import { useState } from "react";
2

3
export function Counter() {
4
  const [count, setCount] = useState(0);
5

6
  return (
7
    <button onClick={() => setCount(count + 1)}>
8
      Clicked {count} times
9
    </button>
10
  );
11
}

1
<script setup lang="ts">
2
import { ref } from "vue";
3

4
const count = ref(0);
5
</script>
6

7
<template>
8
  <button @click="count++">
9
    Clicked {{ count }} times
10
  </button>
11
</template>

1
<script>
2
  let count = 0;
3
</script>
4

5
<button on:click={() => count++}>
6
  Clicked {count} times
7
</button>

Language Preference Memory#

Code Tabs remembers your most recently selected language preference via the browser’s localStorage. Once you’ve switched a tab, when you browse other articles, all Code Tabs containing that language on the page will automatically switch to the corresponding tab.

Syntax Reference#

1
:::code-tabs{default="language identifier"}
2
```language identifier title="display name"
3
code content
4
```
5

6
```another language title="display name"
7
code content
8
```
9
:::

default — optional, specifies the language of the tab to activate by default
title — optional, customizes the tab’s display name (if not set, it is automatically mapped based on the language identifier)
At least 2 fenced code blocks are required