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>

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>