Code

The code component allows you to display and colourise code, using the prism.js system.

Base Component

namespace Andach\LaravelViewComponents\Components;

use Closure;
use Illuminate\View\Component;

class Code extends BaseComponent
{
    protected array $arrayBuildClasses = ['border', 'hollow', 'ring', 'rounded', 'shadow', 'size'];
    protected array $arrayElementClasses = [];

Customisation

Attribute Name	Type	Default Value	Description
border	bool	true	Adds a border to the alert message.
command-line	array\|bool	null	Adds an icon onto the alert on the left. This should be the full string such as "<i class='fa-solid fa-mug-hot'></i>" which allows you to use whatever icon pack you would prefer.
ring	bool	false
rounded	bool	true
shadow	bool	false
size	string	''	Can be either 'xs', 'sm', 'base', 'lg', 'xl'.
title	string	''
variant	string	'default'

Command Line Parameter

The "command-line" parameter accepts either a bool or an array and corresponds to the prism.js Command Line Plugin. If set to boolean true, the 'command-line' class will be added to the output, with no further modifications.

If set to an array, the following attributes can be specified, and will act as in the documentation for the prism.js plugin.

data-user
data-host
data-output
data-prompt
data-filter-output
data-continuation-str
data-continuation-prompt
data-filter-continuation

This is an example with command-line set to true.

Example including Syntax Highlighting

pre[class*="language-"], code[class*="language-"] {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: inherit;
    font-family: monospace, monospace;
    font-size: 0.875rem;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6a9955;
    background: transparent;
}

.token.punctuation {
    color: #999;
}

Example including Command Line

cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini