Authoring Guide · Features

Code Blocks

Complete guide to enhanced code blocks with syntax highlighting

Updated Jan 1, 2024 · 2 min read

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