Plume UI

Code

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

Examples

Basic

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

With Title and Language

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

Using the code prop

javascript 
console.log('Hello World!');

Properties

Prop Type Default Description
language string null Programming language for the tag.
title string null Filename or title displayed in header.
code string null Optional prop to pass code content instead of slot.

Usage

blade 
<x-plume::code 
    title="welcome.blade.php" 
    language="blade"
>
    <h1>Welcome</h1>
</x-plume::code>