Examples

This page demonstrates the Language Badge plugin in action with various code examples and configurations. Each code block below displays a language badge in the top-right corner that fades out on hover.

Basic Code Blocks

JavaScript Example

// Notice the language badge in the top-right corner!
function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to our documentation`;
}

// Usage example
const userName = "Developer";
const message = greetUser(userName);
console.log(message);

Long Code Examples

These examples demonstrate how the language badge helps identify the programming language at a glance:

import pandas as pd
import numpy as np

class DataProcessor:
    def __init__(self, data_source):
        self.data_source = data_source
        self.processed_data = None

    def load_data(self):
        """Load data from the specified source."""
        try:
            self.data = pd.read_csv(self.data_source)
            print(f"Loaded {len(self.data)} records")
            return True
        except Exception as e:
            print(f"Error loading data: {e}")
            return False

    def process_data(self):
        """Process the loaded data."""
        if self.data is not None:
            # Remove duplicates
            self.processed_data = self.data.drop_duplicates()

            # Handle missing values
            self.processed_data = self.processed_data.fillna(0)

            # Normalize numerical columns
            numerical_cols = self.processed_data.select_dtypes(include=[np.number]).columns
            self.processed_data[numerical_cols] = (
                self.processed_data[numerical_cols] - self.processed_data[numerical_cols].mean()
            ) / self.processed_data[numerical_cols].std()

            return self.processed_data
        else:
            raise ValueError("No data loaded. Call load_data() first.")

# Usage
processor = DataProcessor("data.csv")
if processor.load_data():
    result = processor.process_data()
    print("Data processing completed successfully!")

Frameless Code Blocks

These code blocks don’t have titles but still display language badges:

# Install dependencies
npm install expressive-code-language-badge

# Start development server
npm start

# Build for production
npm run build

SELECT
    u.id,
    u.name,
    u.email,
    COUNT(p.id) as post_count,
    MAX(p.created_at) as last_post_date
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.active = true
    AND u.created_at >= '2023-01-01'
GROUP BY u.id, u.name, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC, last_post_date DESC
LIMIT 50;

Multiple Code Blocks

Here are several code blocks showing different language badges:

console.log("JavaScript example");

print("Python example")

echo "Bash example - excluded from badges"

.css-example {
  color: blue;
}

{
  "message": "JSON example - excluded from badges",
  "type": "JSON"
}

Custom Language Labels

These examples show how the languageMap option remaps language identifiers to custom display labels:

#include <iostream>
int main() {
  std::cout << "This shows 'C++' instead of 'cpp'" << std::endl;
  return 0;
}

Console.WriteLine("This shows 'C#' instead of 'csharp'");

Excluded Languages

The following code blocks have been excluded from showing badges using the excludeLanguages option:

{
  "note": "JSON badges are excluded in the current configuration",
  "showsBadge": false
}

/* CSS badges are excluded too */
.no-badge {
  display: none;
}