Code

A component for displaying code snippets with a copy-to-clipboard feature.

Examples

Basic

<x-plume::button>
    <span>Click me</span>
    </x-plume::button>

blade

<x-plume::code>
    &lt;x-plume::button&gt;
    &lt;span&gt;Click me&lt;/span&gt;
    &lt;/x-plume::button&gt;
</x-plume::code>

With Title and Language

example.blade.php blade

<div class="p-4">
    <x-plume::alert style="success">
    Success message!
    </x-plume::alert>
    </div>

blade

<x-plume::code title="example.blade.php" language="blade">
    &lt;div class="p-4"&gt;
    &lt;x-plume::alert style="success"&gt;
    Success message!
    &lt;/x-plume::alert&gt;
    &lt;/div&gt;
</x-plume::code>

Using the code prop

javascript

console.log('Hello World!');

blade

<x-plume::code language="javascript" code="console.log('Hello World!');" />

Programmatic Copy

Use the $copy magic helper to copy any text to the clipboard.

blade

<x-plume::button style="outline"
    x-on:click="$copy('Copied from button!'); $success('Text copied to clipboard!')">
    Copy custom text
</x-plume::button>

Prop	Type	Default	Description
language	string	null	Programming language name for label and CSS class.
title	string	null	Optional filename or title for the code block.
code	string	null	The code content. If provided as a prop, content is NOT parsed by Blade.

Helper Functions

You can use the $copy magic helper to copy text to the clipboard from anywhere.

Function	Description
$copy(text)	Copies the provided `text` string to the user's clipboard.

Usage

blade

<x-plume::code language="javascript">
    console.log('Hello');
</x-plume::code>