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:
mdx
1```javascript2const greeting = "Hello, World!";3console.log(greeting);4```Live Examples
JavaScript
javascript
1function fibonacci(n) {2 if (n <= 1) return n;3 return fibonacci(n - 1) + fibonacci(n - 2);4}5 6console.log(fibonacci(10)); // 55TypeScript
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
python
1def quicksort(arr):2 if len(arr) <= 1:3 return arr4 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
bash
1# Install dependencies2npm install3 4# Start development server5npm run devJSON
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,tsxpython,ruby,go,rustbash,shell,powershellhtml,css,scssjson,yaml,tomlsql,graphqlmarkdown,mdx