Overview
The Code Snippet block displays formatted code with syntax highlighting for over 20 programming languages. It includes a one-click copy button, optional line numbers, and customizable display options perfect for documentation, tutorials, and technical content.
Fields
| Field | Description |
|---|
| Heading | Optional section title above the code |
| Subheading | Supporting text below the heading |
| Language | Programming language for syntax highlighting |
| Filename | Optional filename display above the code |
| Code | The code content to display (required) |
| Line Prefix | Line indicator style: Numbers, Dollar sign, or Arrow |
| Show Line Numbers | Display line prefixes |
| Show Copy Button | Enable one-click copy to clipboard |
| Show Language Badge | Display the language indicator |
| Max Height | Scrollable height limit for long code |
| Content Width | Control the maximum width of the content area |
| Animation | Entrance animation effect |
Supported Languages
The block supports syntax highlighting for:
| Category | Languages |
|---|
| Web | JavaScript, TypeScript, HTML, CSS, SCSS, JSX, TSX, Vue |
| Backend | PHP, Python, Ruby, Go, Rust, Java, C#, C++ |
| Data | JSON, YAML, SQL |
| Mobile | Swift, Kotlin |
| DevOps | Bash, Docker, Nginx, Apache |
| Other | Markdown, Plain Text |
Line Prefix Options
| Style | Display |
|---|
| Numbers | Sequential line numbers (1, 2, 3...) |
| Dollar | Shell-style prompt ($) |
| Arrow | Arrow indicator (>) |
Max Height Options
| Option | Behavior |
|---|
| None | Show all code (no scroll) |
| Small | 300px max height |
| Medium | 400px max height |
| Large | 500px max height |
| XL | 600px max height |
Tips
- Use the filename field to indicate the file being shown
- Dollar sign prefix works well for terminal/shell commands
- Enable max height for long code snippets to prevent page bloat
- The copy button copies code without line numbers
Examples