Code Block

Display syntax-highlighted code with line numbers and copy functionality

Code blocks display syntax-highlighted code with line numbers, a copy button, and optional filename headers.

Usage

Code blocks are automatically created when using fenced code blocks with a language specifier:

Code
mdx
1```javascript
2const greeting = "Hello, World!";
3console.log(greeting);
4```

Live Examples

JavaScript

Code
javascript
1function fibonacci(n) {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5 
6console.log(fibonacci(10)); // 55

TypeScript

Code
typescript
1interface User {
2 id: string;
3 name: string;
4 email: string;
5}
6 
7function greetUser(user: User): string {
8 return `Hello, ${user.name}!`;
9}

Python

Code
python
1def quicksort(arr):
2 if len(arr) <= 1:
3 return arr
4 pivot = arr[len(arr) // 2]
5 left = [x for x in arr if x < pivot]
6 middle = [x for x in arr if x == pivot]
7 right = [x for x in arr if x > pivot]
8 return quicksort(left) + middle + quicksort(right)

Bash

Code
bash
1# Install dependencies
2npm install
3 
4# Start development server
5npm run dev

JSON

Code
json
1{
2 "name": "my-project",
3 "version": "1.0.0",
4 "dependencies": {
5 "react": "^19.0.0",
6 "svelte": "^5.0.0"
7 }
8}

Features

Info
Code blocks include automatic syntax highlighting for many languages including JavaScript, TypeScript, Python, Bash, JSON, CSS, and more.
  • Syntax Highlighting - Automatic language detection and highlighting
  • Line Numbers - Easy reference for specific lines
  • Copy Button - One-click code copying
  • Filename Header - Optional filename display

Supported Languages

Common languages include:

  • javascript, typescript, jsx, tsx
  • python, ruby, go, rust
  • bash, shell, powershell
  • html, css, scss
  • json, yaml, toml
  • sql, graphql
  • markdown, mdx