Code Blocks

Enhanced code blocks with syntax highlighting, copy functionality, and beautiful formatting.

Overview

Code blocks automatically provide syntax highlighting for all major programming languages, along with a copy button and language badge.

Features

• ✅ Syntax Highlighting: Beautiful color-coded syntax for all languages
• ✅ Copy Button: One-click copy to clipboard (appears on hover)
• ✅ Line Numbers: Optional line numbers for easier reference
• ✅ Language Badge: Shows the programming language
• ✅ Filename Support: Display filename above code block
• ✅ Dark Theme: Beautiful dark theme matching your site
• ✅ Responsive: Works perfectly on all screen sizes

Basic Usage

Use standard markdown code fences:

Supported Languages

The code blocks support all major programming languages including:

• Shell/Bash: bash, sh, zsh
• YAML: yaml, yml
• JSON: json
• JavaScript/TypeScript: javascript, js, typescript, ts, tsx, jsx
• Java: java
• C/C++: c, cpp, c++
• Python: python, py
• Go: go
• Rust: rust, rs
• Ruby: ruby, rb
• PHP: php
• SQL: sql
• HTML/CSS: html, css
• Docker: dockerfile, docker
• Kubernetes: yaml (with k8s context)
• And many more!

Examples

JavaScript

MDX Syntax:

Rendered Result:

TypeScript

MDX Syntax:

Rendered Result:

Bash/Shell

MDX Syntax:

Rendered Result:

YAML

MDX Syntax:

Rendered Result:

JSON

MDX Syntax:

Rendered Result:

Python

MDX Syntax:

Rendered Result:

Java

MDX Syntax:

Rendered Result:

C

MDX Syntax:

Rendered Result:

Go

MDX Syntax:

Rendered Result:

With Filename

You can display a filename above the code block:

MDX Syntax:

Rendered Result:

Format: ```language:filename

Copy Functionality

• Hover over any code block to see the copy button
• Click to copy the entire code block
• Visual feedback when code is copied
• Works on all devices including mobile

Best Practices

1. Always specify language: Helps with syntax highlighting
2. Use descriptive code: Add comments when needed
3. Keep blocks focused: Don't make code blocks too long
4. Use filenames: When showing file contents, include filename
5. Test your code: Make sure code examples actually work
6. Format properly: Use proper indentation and formatting

Code Block Styling

Code blocks automatically:

• Use monospace font (JetBrains Mono)
• Apply dark theme (github-dark)
• Show proper indentation
• Handle long lines with horizontal scroll
• Maintain proper spacing
• Display line numbers

Inline Code

For inline code, use single backticks:

Inline code is styled with:

• Distinct background color
• Monospace font
• Proper padding
• Theme-aware colors

Next Steps

• Images & Videos - Learn about media components
• Tabbed Content - Learn about multi-tab sections
• Callout Components - Learn about styled information boxes