Code – Laravel Livewire Basic Components

<x-code> wraps its slot in a <pre><code> block and adds a copy button that appears when the user hovers the block. It is a thin, unopinionated wrapper: it does not highlight anything by itself, which keeps it usable for a one-line shell command as well as for a fully highlighted file.

For syntax highlighting, put a <x-torchlight-code> block inside it. That is exactly how every code sample in this documentation is rendered.

Basic Usage

Put whatever you want to show inside the component. Hover the block to reveal the copy button — clicking it copies the content of the inner <code> element to the clipboard and flashes the button green for one second.

composer require maskowlabs/basic-components

1<x-code>
2composer require maskowlabs/basic-components
3</x-code>

With Syntax Highlighting

Wrap the content in <x-torchlight-code> and pass a language. The block is highlighted by Torchlight at render time and cached, so there is no client-side highlighter to ship.

Torchlight is not part of this package

<x-torchlight-code> comes from torchlight/torchlight-laravel. Install it separately if you want highlighting — <x-code> works fine without it.

1 
2$user = User::query()
3    ->where('email', 'julius@maskow.io')
4    ->firstOrFail();
5 
6$user->update(['name' => 'Julius']);

1<x-code>
2    <x-torchlight-code language='php'>
3        $user = User::query()
4            ->where('email', 'julius@maskow.io')
5            ->firstOrFail();
6 
7        $user->update(['name' => 'Julius']);
8    </x-torchlight-code>
9</x-code>

Component Attributes

The component takes three props. Every other attribute — class, style, x-…, data-… — is merged onto the outer <div class="code">.

Attribute	Type	Default	Description
`copy`	Boolean	`true`	Renders the copy button. Pass `:copy="false"` to leave it out entirely.
`id`	String	Random	The ID of the inner `<code>` element. Without it, an ID like `code-1234567` is generated so that the copy button has something to point at.
`button-type`	String	`white`	The `type` of the copy button — any button type works, e.g. `primary`, `gray`, `transparent`.

Without the Copy Button

Set :copy="false" when the block is purely illustrative — a shell session with a prompt, or output the reader is not supposed to paste anywhere.

1 
2php artisan vendor:publish --tag=basic-components:config

1<x-code :copy="false">
2    <x-torchlight-code language='bash'>
3        php artisan vendor:publish --tag=basic-components:config
4    </x-torchlight-code>
5</x-code>

Styling the Copy Button

button-type is handed straight to <x-button>, so every button type of the package is available. The button is always rendered in size xs in the top right corner.

1 
2{
3    "require": {
4        "maskowlabs/basic-components": "^1.0"
5    }
6}

1<x-code button-type="primary">
2    <x-torchlight-code language='json'>
3        {
4            "require": {
5                "maskowlabs/basic-components": "^1.0"
6            }
7        }
8    </x-torchlight-code>
9</x-code>

Copying from Somewhere Else

Pass your own id and you can trigger the very same copy from any other element — the JavaScript helper window.copyToClipboard() accepts an ID prefixed with #.

Because the target is a <code> element, the helper HTML-decodes the content before it writes it to the clipboard. A block showing <div> therefore lands in the clipboard as <div>, not as the entity.

See JavaScript Utilities for the full behaviour of copyToClipboard().

1 
2npm install && npm run build

 1<x-code id="install-command">
 2    <x-torchlight-code language='bash'>
 3        npm install && npm run build
 4    </x-torchlight-code>
 5</x-code>
 6 
 7{{-- The same content can now be copied from anywhere on the page --}}
 8<x-button
 9    class="mt-2"
10    icon="clipboard-document--mini"
11    x-on:click="copyToClipboard('#install-command')"
12>
13    @lang('Copy the command')
14</x-button>

Custom Styling

The outer element carries the code class; anything you pass is merged onto it. The helper classes of the package are the quickest way to give a block a border and some spacing.

1 
2window.addEventListener('basic-components:ready', () => {
3    console.log('Basic Components is up.');
4});

1<x-code class="border-solid border-gray-200 radius-3 my-3">
2    <x-torchlight-code language='javascript'>
3        window.addEventListener('basic-components:ready', () => {
4            console.log('Basic Components is up.');
5        });
6    </x-torchlight-code>
7</x-code>

Rendering a File

Instead of an inline slot, <x-torchlight-code> can read a file through its contents attribute. The path is resolved against the snippet_directories array of config/torchlight.php — in this project that is resources/views/preview/.

This is what powers every preview on this site: the same file is rendered live on the left and printed as source on the right.

1<x-code>
2composer require maskowlabs/basic-components
3</x-code>

1{{-- The file is resolved against the "snippet_directories" of config/torchlight.php --}}
2<x-code>
3    <x-torchlight-code language='blade' contents="code/default.blade.php" />
4</x-code>

Showing HTML

The slot is printed unescaped. That is what makes the Torchlight integration possible, but it also means raw markup in the slot is rendered as markup rather than shown as text.

When you are not using Torchlight and want to display HTML, escape it yourself — either with entities or by pushing the string through Blade's {{ }} echo.

Never print user input directly

Because the slot is not escaped, passing untrusted content into <x-code> is an XSS hole. Run it through e() first.

<div class="card">Hello</div>

<div class="card">Hello</div>

 1{{-- The slot is printed unescaped. Without Torchlight, escape the markup
 2     yourself - either with entities ... --}}
 3<x-code>
 4    &lt;div class="card"&gt;Hello&lt;/div&gt;
 5</x-code>
 6 
 7{{-- ... or by letting Blade escape it for you. --}}
 8<x-code class="mt-3">
 9    {{ '<div class="card">Hello</div>' }}
10</x-code>