rspress-language-tabs

April 5, 2026 · View on GitHub

npm version npm downloads license

An Rspress v2 component library for creating tabbed code examples with programming language icons from Simple Icons.

Features

  • 🎨 Language Icons - Automatically displays icons for 40+ programming languages
  • 🌓 Dark Mode Support - Icons automatically adjust colors for light/dark themes
  • 🔄 Easy to Use - Simple MDX syntax similar to Rspress's built-in components
  • 🎯 TypeScript Support - Fully typed with TypeScript
  • 📦 Zero Config - Works out of the box
  • ⚡️ Rspress v2 - Built for Rspress v2.0.0-beta and above

Installation

npm install rspress-language-tabs
# or
pnpm add rspress-language-tabs
# or
yarn add rspress-language-tabs
# or
bun add rspress-language-tabs

Usage

Import the components in your MDX file:

import { LanguageTabs, LanguageTab } from "rspress-language-tabs";

<LanguageTabs>
  <LanguageTab language="javascript">
```javascript
console.log("Hello from JavaScript!");
```python print("Hello from Python!") ``` ```go fmt.Println("Hello from Go!") ``` ```

Supported Languages

The plugin automatically recognizes and displays icons for the following languages:

  • JavaScript / TypeScript
  • Python
  • Java
  • Go / Golang
  • Rust
  • C / C++ / C#
  • PHP
  • Ruby
  • Swift
  • Kotlin

Scripting Languages

  • Shell / Bash
  • PowerShell
  • Perl
  • Lua

Functional Languages

  • Haskell
  • Elixir
  • Erlang
  • OCaml
  • Clojure
  • Scala

Other Languages

  • Dart
  • R
  • Julia
  • Nim
  • Crystal
  • Zig
  • V / Vlang
  • Groovy

Markup & Data

  • HTML
  • CSS / SCSS / Sass / Less
  • JSON
  • XML
  • YAML / YML
  • TOML
  • Markdown

API

<LanguageTabs>

The container component for language tabs.

interface LanguageTabsProps {
  children: ReactNode;
}

<LanguageTab>

Individual tab component that holds code for a specific language.

interface LanguageTabProps {
  language: string;
  label?: string;
  children: ReactNode;
}

Props:

  • language (required): The programming language name. Case-insensitive. Use common names like "javascript", "python", "go", etc.
  • label (optional): Custom label to display instead of the capitalized language name.
  • children (required): The content to display in the tab. Typically a code block.

Examples

Basic Example

import { LanguageTabs, LanguageTab } from "rspress-language-tabs";

<LanguageTabs>
  <LanguageTab language="javascript">
```javascript
const greeting = "Hello World";
console.log(greeting);
```typescript const greeting: string = "Hello World"; console.log(greeting); ``` ```

Multiple Languages

<LanguageTabs>
  <LanguageTab language="javascript">
```javascript
// JavaScript implementation
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
```python # Python implementation import requests

response = requests.get('https://api.example.com/data') data = response.json() print(data)

  </LanguageTab>
  <LanguageTab language="go">
```go
// Go implementation
package main

import (
    "encoding/json"
    "net/http"
)

func main() {
    resp, _ := http.Get("https://api.example.com/data")
    defer resp.Body.Close()

    var data interface{}
    json.NewDecoder(resp.Body).Decode(&data)
}
```

Language Aliases

The plugin supports common aliases for languages:

  • js → JavaScript
  • ts → TypeScript
  • py → Python
  • rs → Rust
  • cpp → C++
  • cs → C#
  • rb → Ruby
  • kt → Kotlin
  • sh → Shell/Bash

Requirements

This package requires the following peer dependencies:

  • @rspress/core: ^2.0.0
  • React: ^18.0.0 or ^19.0.0

Make sure these are installed in your project:

npm install @rspress/core react

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

For detailed contribution guidelines, see CONTRIBUTING.md.

License

MIT © Andrew MacCuaig

Credits