Multi-Language Code Block

The Multi-Language Code block lets you display one code example in multiple programming languages, all inside a single, clean UI with a language switcher.

This is perfect for:

• API documentation
• SDK examples
• Developer guides
• Tutorials that support multiple platforms

Instead of repeating the same example multiple times, PinkDocs keeps everything organized, readable, and interactive.

Demo

<?php
$config = [
    'docs_url' => 'https://pinkdocs.com/docs',
    'language' => 'en',
    'debug'    => true
];

function validateConfig($config) {
    return isset($config['docs_url']) && !empty($config['docs_url']);
}

if (validateConfig($config)) {
    echo "Documentation URL: " . $config['docs_url'] . PHP_EOL;
    echo "Language: " . $config['language'] . PHP_EOL;
} else {
    echo "Invalid documentation configuration";
}

const config = {
  docsUrl: "https://pinkdocs.com/docs",
  language: "en",
  debug: true
};

function validateConfig(cfg) {
  return cfg.docsUrl && cfg.docsUrl.length > 0;
}

if (validateConfig(config)) {
  console.log("Documentation URL:", config.docsUrl);
  console.log("Language:", config.language);
} else {
  console.error("Invalid documentation configuration");
}

config = {
    "docs_url": "https://pinkdocs.com/docs",
    "language": "en",
    "debug": True
}

def validate_config(cfg):
    return "docs_url" in cfg and len(cfg["docs_url"]) > 0

if validate_config(config):
    print("Documentation URL:", config["docs_url"])
    print("Language:", config["language"])
else:
    print("Invalid documentation configuration")

import java.util.HashMap;

public class DocsConfig {
    public static void main(String[] args) {
        HashMap<String, String> config = new HashMap<>();
        config.put("docs_url", "https://pinkdocs.com/docs");
        config.put("language", "en");

        if (validateConfig(config)) {
            System.out.println("Documentation URL: " + config.get("docs_url"));
            System.out.println("Language: " + config.get("language"));
        } else {
            System.out.println("Invalid documentation configuration");
        }
    }

    static boolean validateConfig(HashMap<String, String> cfg) {
        return cfg.containsKey("docs_url") && !cfg.get("docs_url").isEmpty();
    }
}

DOCS_URL="https://pinkdocs.com/docs"
LANGUAGE="en"
DEBUG=true

if [ -n "$DOCS_URL" ]; then
  echo "Documentation URL: $DOCS_URL"
  echo "Language: $LANGUAGE"
else
  echo "Invalid documentation configuration"
fi

Understanding the Code Block UI

Each block consists of:

• Filename label (top-left, optional)
• Language selector dropdown
• Tabbed languages
• Code editor area
• Copy code button
• Language switcher (frontend)

What the Multi-Language Code Block Does

• Shows one code snippet per language
• Allows readers to switch languages instantly
• Keeps all versions grouped in a single block
• Preserves syntax highlighting for each language
• Supports dozens of programming languages

How To Use The Block

1. Open any PinkDocs document
2. Click the ➕ Add Block button
3. Search for PinkDocs Multi-Language Code
4. Insert the block

Adding Code in Multiple Languages

1. Set the Filename (Optional)
2. Select the languages you want
3. Click + Add Language to add more
4. Remove any language using the ❌ icon
5. Click on a language tab (e.g. Python)
6. Paste or type the code for that language
7. Switch to another tab (e.g. JavaScript)
8. Add the equivalent code

Supported Languages Include:

• JavaScript
• TypeScript
• Python
• PHP
• cURL
• Ruby
• Go
• Java
• C#
• C++
• Swift
• Kotlin
• Rust
• Bash / Shell
• PowerShell
• HTML / CSS
• JSON / YAML
• SQL
• GraphQL
• Plain Text

How It Works on the Frontend

When users view the docs:

• A language dropdown appears at the top
• Switching languages updates the code instantly
• Code formatting stays consistent
• Copy button copies only the active language

This creates a developer-friendly experience similar to modern API docs

Copy Code & Utilities

Each code block includes:

• 📋 Copy button – copies only the selected language
• ✨ Clean formatting – no extra markup
• ⚠️ Error highlighting (if enabled)

This ensures users copy exactly what they need.

What Gets Exported & Imported

When you export PinkDocs documents:

• ✅ All languages in the code block are preserved
• ✅ Syntax highlighting stays intact
• ✅ Content imports exactly as written

No code is lost during migration.