Code Snippet Block

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.

This is the Code Snippet Block

Highlight important lines and keep code readable with copy support.

web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/blocks', function () {

    return view('blocks.index');

});

Route::get('/blocks/{slug}', function (string $slug) {

    return view('blocks.show', compact('slug'));

});

?>

PHP

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