Code

The Code component provides a reusable pattern for code in the interface.

Code block example

The code component can be used to display a block of code with syntax highlighting. In this example the language parameter is defined as php.

class Automobile
    {
        private $vehicleMake;
        private $vehicleModel;

        public function __construct($make, $model)
        {
            $this->vehicleMake = $make;
            $this->vehicleModel = $model;
        }

        public function getMakeAndModel()
        {
            return $this->vehicleMake . ' ' . $this->vehicleModel;
        }
    }

    class AutomobileFactory
    {
        public static function create($make, $model)
        {
            return new Automobile($make, $model);
        }
    }

<!-- code.blade.php -->
<div class="c-code" data-uid="69f0d00e87bd4" data-component="code">
    
    <pre class="c-code__pre"><code class="c-code__output language-php" data-type="php">class Automobile
    {
        private $vehicleMake;
        private $vehicleModel;

        public function __construct($make, $model)
        {
            $this->vehicleMake = $make;
            $this->vehicleModel = $model;
        }

        public function getMakeAndModel()
        {
            return $this->vehicleMake . ' ' . $this->vehicleModel;
        }
    }

    class AutomobileFactory
    {
        public static function create($make, $model)
        {
            return new Automobile($make, $model);
        }
    }</code></pre>
</div>

@code(['language' => 'php', 'content' => ''])
    
    class Automobile
    {
        private $vehicleMake;
        private $vehicleModel;

        public function __construct($make, $model)
        {
            $this->vehicleMake = $make;
            $this->vehicleModel = $model;
        }

        public function getMakeAndModel()
        {
            return $this->vehicleMake . ' ' . $this->vehicleModel;
        }
    }

    class AutomobileFactory
    {
        public static function create($make, $model)
        {
            return new Automobile($make, $model);
        }
    }

@endcode

Code block with description

The content parameter adds a descriptive paragraph above the code block, giving context about what the code does.

A helper function that formats a date string into a human-readable format.

function formatDate(string $date, string $format = 'Y-m-d'): string
    {
        return date($format, strtotime($date));
    }

<!-- code.blade.php -->
<div class="c-code" data-uid="69f0d00e87fcf" data-component="code">
            <p class="c-code__description">A helper function that formats a date string into a human-readable format.</p>
    
    <pre class="c-code__pre"><code class="c-code__output language-php" data-type="php">function formatDate(string $date, string $format = 'Y-m-d'): string
    {
        return date($format, strtotime($date));
    }</code></pre>
</div>

@code(['language' => 'php', 'content' => 'A helper function that formats a date string into a human-readable format.'])

    function formatDate(string $date, string $format = 'Y-m-d'): string
    {
        return date($format, strtotime($date));
    }

@endcode

HTML code block

Setting escape to true HTML-encodes the slot content before output, allowing HTML markup to be displayed as literal code rather than rendered by the browser.

<div class="c-card">
        <div class="c-card__header">
            <h2 class="c-card__title">Card title</h2>
        </div>
        <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

<!-- code.blade.php -->
<div class="c-code" data-uid="69f0d00e882b3" data-component="code">
    
    <pre class="c-code__pre"><code class="c-code__output language-html" data-type="html"><div class="c-card">
        <div class="c-card__header">
            <h2 class="c-card__title">Card title</h2>
        </div>
        <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div></code></pre>
</div>

@code(['language' => 'html', 'escape' => true, 'content' => ''])
    <div class="c-card">
        <div class="c-card__header">
            <h2 class="c-card__title">Card title</h2>
        </div>
        <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
@endcode

CSS code block

The language parameter accepts any Prism.js language identifier, such as css, to apply the correct syntax highlighting.

.c-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
    }

    .c-button--primary {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

<!-- code.blade.php -->
<div class="c-code" data-uid="69f0d00e88554" data-component="code">
    
    <pre class="c-code__pre"><code class="c-code__output language-css" data-type="css">.c-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
    }

    .c-button--primary {
        background-color: var(--color-primary);
        color: var(--color-white);
    }</code></pre>
</div>

@code(['language' => 'css', 'content' => ''])
    .c-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
    }

    .c-button--primary {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
@endcode

API

Parameter	Default	Description
content	Undocumented code...	-
slot	echo 'Whoops, theres no code here. Where is it?'	-
language	php	-
escape	false	-
componentElement	div	-
preTagElement	pre	-

CSS API

Variable	Default	Type	Values	Description
--c-code--border-radius	var(--border-radius)	range	-	Border Radius
--c-code--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-code--font-family-code	var(--font-family-code)	font	-	Code Font
--c-code--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-code--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-code--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-code--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.

Similar components

Loader Comment Card