rspress-language-tabs

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
• 🔄 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!");

Supported Languages

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

Popular 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;
}

<Tab>

Individual tab component that holds code for a specific language.

interface TabProps {
  language: string;
  children: ReactNode;
}

Props:

• language (required): The programming language name. Case-insensitive. Use common names like "javascript", "python", "go", etc.
• 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);

Multiple Languages

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

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

Customization

Custom Icons

If you need to use the icon utility directly:

import { getLanguageIcon } from "rspress-language-tabs";

const icon = getLanguageIcon("javascript", { size: 24, color: "#f7df1e" });

Browser Support

This package supports all modern browsers that support ES2021+ features.

Contributing

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

License

MIT © Andrew MacCuaig

Credits

• Icons provided by Simple Icons
• Inspired by Rspress's PackageManagerTabs component

Use Figtree as the default font in your Rspress website.

About

Figtree is a clean yet friendly geometric sans serif font for usage in web and mobile apps.

See Google Fonts - Figtree

Usage

Install:

npm add rspress-plugin-font-figtree -D

Add plugin to your rspress.config.ts:

// rspress.config.ts
import { pluginFontFigtree } from "rspress-plugin-font-figtree";

export default {
  plugins: [pluginFontFigtree()],
};