Prism Blade

Blade Language syntax highlighting for Prism.

Installation

npm i prism-blade

Alternative: CDN

<!-- Get Prism from the CDN -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>

<!-- Make sure to include the following language definitions -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-php.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup-templating.min.js"></script>

<!-- Then include the script from the CDN -->
<script src="https://cdn.jsdelivr.net/npm/prism-blade@latest/dist/prism-blade.min.js"></script>

Usage

import Prism from 'prismjs';
import 'prism-blade';

const code = `@include('header')`;
const html = Prism.highlight(code, Prism.languages.blade, 'blade');

Preview

Interpolation

Hello, {{ $name }}.
The current UNIX timestamp is {{ time() }}.
Your favorite color is {{ Auth::user()->getFavorite('color') }}.

Interpolations in attribute values

<link href="{{ asset('css/dashboard.css') }}" rel="stylesheet">
<body class="{{ $isDark ? 'dark' : 'light' }}">Hi!</body>

Unscaped interpolation

{!! Auth::user()->name !!}

Comments

{{-- This is a comment --}}

Directives

@extends('layouts.app')
@section('title', 'Dashboard')
@json(['user' => Auth::user(), 'notifications' => $notifications])

@can('edit-posts')
    <p>You can edit posts.</p>
@elsecan('view-posts')
    <p>You can view posts.</p>
@else
    <p>Access denied.</p>
@endcan

Components

<x-alert
    type="error"
    :name="auth()->user()->name"
    :message="$message->getMessage()" />

<x-inputs.button/>

Scripts and style blocks

<style>
    .card { color: red; }
</style>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Loaded');
        });
    </script>
@endpush

@php directive

@php
    $userRole = Auth::user()->role;
@endphp

@verbatim directive

<html>
    @verbatim
        This will not be parsed as Blade: {{ foo }}
        <!-- A comment -->
        <script>console.log('Bar');</script>
    @endverbatim
</html>