Phara UI

Phara UI v2.x

Code Block

Display code snippets with syntax highlighting, copy functionality, and line numbers.

Basic

Default code block with copy button

function hello() {
console.log("Hello, World!");
}

Blade

<x-ui::code-block>
function hello() {
console.log("Hello, World!");
}
</x-ui::code-block>

With Title

Add a title to provide context for the code snippet

hello.js

function hello() {
console.log("Hello, World!");
}

User.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
protected $fillable = ['name', 'email'];
}

Blade

<x-ui::code-block title="hello.js">
function hello() {
console.log("Hello, World!");
}
</x-ui::code-block>

With Language

Display a language badge to identify the programming language

JavaScript

function hello() {
console.log("Hello, World!");
}

PHP

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
protected $fillable = ['name', 'email'];
}

Python

def hello():
print("Hello, World!")

if __name__ == "__main__":
hello()

Blade

<x-ui::code-block language="JavaScript">
function hello() {
console.log("Hello, World!");
}
</x-ui::code-block>

Line Numbers

Enable line numbers for easier reference

calculator.js JavaScript

function calculateSum(a, b) {
const result = a + b;
return result;
}

function calculateProduct(a, b) {
const result = a * b;
return result;
}

const sum = calculateSum(5, 10);
const product = calculateProduct(5, 10);

console.log("Sum:", sum);
console.log("Product:", product);

Blade

<x-ui::code-block :showLineNumbers="true" language="JavaScript">
function calculateSum(a, b) {
return a + b;
}
</x-ui::code-block>

No Copy Button

Hide the copy button when not needed

JavaScript

function hello() {
console.log("Hello, World!");
}

Blade

<x-ui::code-block :showCopyButton="false" language="JavaScript">
function hello() {
console.log("Hello, World!");
}
</x-ui::code-block>

Different Languages

Examples of code blocks with different programming languages

index.html HTML

<div class="container">
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</div>

styles.css CSS

.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

h1 {
font-size: 2rem;
color: #333;
}

deploy.sh Bash

#!/bin/bash

echo "Hello, World!"
cd /var/www/html
php artisan migrate --seed

composer.json JSON

{
"name": "phara/ui-kit",
"version": "1.0.0",
"description": "Laravel Livewire UI Kit",
"type": "library"
}


                                Multiple languages supported: HTML, CSS, JavaScript, PHP, Python, Bash, JSON, and more