Pygments Syntax Highlighting Theme Showcase

Beautiful Jekyll Next includes over 80 Pygments syntax highlighting themes to choose from! Use the dropdown below to preview different themes and find your favorites.

Note: The theme previews below use enhanced CSS specificity to override the site’s default styles for demonstration purposes. When you configure a theme in your _config.yml and build your site, the actual appearance may differ slightly based on your site’s color configuration and theme settings. Some themes define colors that work better in specific contexts and may appear differently when the page is built with your custom color options.

Interactive Theme Preview

Code Samples

Python Example

# Sample Python code
def fibonacci(n):
    '''Calculate Fibonacci sequence'''
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# Test the function
for i in range(10):
    print(f'F({i}) = {fibonacci(i)}')

# Dictionary and list examples
config = {
    'name': 'Beautiful Jekyll',
    'version': 6.0,
    'features': ['themes', 'responsive', 'fast']
}

# List comprehension
squares = [x**2 for x in range(10)]

# Lambda function
multiply = lambda x, y: x * y
result = multiply(5, 3)

JavaScript Example

// Sample JavaScript code
function fibonacci(n) {
    // Calculate Fibonacci sequence
    if (n <= 1) {
        return n;
    } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
}

// Test the function
for (let i = 0; i < 10; i++) {
    console.log(`F(${i}) = ${fibonacci(i)}`);
}

// Object and array examples
const config = {
    name: 'Beautiful Jekyll',
    version: 6.0,
    features: ['themes', 'responsive', 'fast']
};

// Arrow function
const multiply = (x, y) => x * y;
const result = multiply(5, 3);

// Promise example
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Ruby Example

# Sample Ruby code
def fibonacci(n)
  # Calculate Fibonacci sequence
  if n <= 1
    n
  else
    fibonacci(n - 1) + fibonacci(n - 2)
  end
end

# Test the function
(0..9).each do |i|
  puts "F(#{i}) = #{fibonacci(i)}"
end

# Hash and array examples
config = {
  name: 'Beautiful Jekyll',
  version: 6.0,
  features: ['themes', 'responsive', 'fast']
}

# Block example
squares = (0..9).map { |x| x**2 }

# Lambda
multiply = ->(x, y) { x * y }
result = multiply.call(5, 3)

Java Example

// Sample Java code
public class Fibonacci {
    // Calculate Fibonacci sequence
    public static int fibonacci(int n) {
        if (n <= 1) {
            return n;
        } else {
            return fibonacci(n - 1) + fibonacci(n - 2);
        }
    }

    public static void main(String[] args) {
        // Test the function
        for (int i = 0; i < 10; i++) {
            System.out.println("F(" + i + ") = " + fibonacci(i));
        }

        // Array example
        int[] squares = new int[10];
        for (int i = 0; i < 10; i++) {
            squares[i] = i * i;
        }
    }
}

CSS Example

/* Sample CSS code */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

SQL Example

-- Sample SQL code
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert sample data
INSERT INTO users (username, email) VALUES
    ('john_doe', 'john@example.com'),
    ('jane_smith', 'jane@example.com');

-- Select with JOIN
SELECT u.username, p.title, p.created_at
FROM users u
INNER JOIN posts p ON u.id = p.user_id
WHERE p.published = 1
ORDER BY p.created_at DESC
LIMIT 10;

-- Update with condition
UPDATE users
SET email = 'newemail@example.com'
WHERE username = 'john_doe';

Popular Theme Combinations

Here are some recommended light/dark theme pairs for your site:

GitHub Style

pygments-theme-light: "pygments-styles/github-light-default"
pygments-theme-dark: "pygments-styles/github-dark-dimmed"

VS Code Style

pygments-theme-light: "pygments-styles/light-plus"
pygments-theme-dark: "pygments-styles/dark-plus"

Gruvbox Style

pygments-theme-light: "pygments/gruvbox-light"
pygments-theme-dark: "pygments/gruvbox-dark"

Catppuccin Style

pygments-theme-light: "pygments-styles/catppuccin-latte"
pygments-theme-dark: "pygments-styles/catppuccin-mocha"

Solarized Style

pygments-theme-light: "pygments/solarized-light"
pygments-theme-dark: "pygments/solarized-dark"

One Light/Dark

pygments-theme-light: "pygments-styles/one-light"
pygments-theme-dark: "pygments-styles/one-dark-pro"

Dracula

pygments-theme-light: "pygments-styles/light-plus"
pygments-theme-dark: "pygments/dracula"

Nord

pygments-theme-light: "pygments-styles/min-light"
pygments-theme-dark: "pygments/nord"

Tips

• Use the dropdown above to instantly preview any theme with the code samples
• The “Config value” box shows you the exact line to add to your _config.yml
• Use the theme switcher button in the navbar to toggle between light and dark site themes

How to Apply a Theme

Once you’ve found a theme you like:

1. Copy the config value shown in the box above the dropdown
2. Open your _config.yml file
3. Add or update the pygments-theme-light or pygments-theme-dark setting
4. Rebuild your site with bundle exec jekyll serve
5. Enjoy your new syntax highlighting!

More Information

• Total themes available: 80+
• All themes are generated using Pygments
• Many additional themes provided by Pygments Styles
• Compatible with Beautiful Jekyll Next’s theme switcher
• Fully customizable color schemes