Examples of Highlight Blade

Highlight Laravel Blade Template with highlight.js.

Blade Template

# Basic

        @php
  $inIndexPage = request()->url() === route('posts.index');
@endphp

<a
  href="{{ route('posts.index') }}"
  @class([
      'flex items-center ...',
      'bg-gray-200 text-gray-900 ...' => $inIndexPage,
      'text-gray-500 dark:text-gray-400 ...' => !$inIndexPage,
  ])
  wire:navigate
>
  <x-icon.home class="w-4" />
  <span class="ml-2">All Posts</span>
</a>

<x-alert type="error" :message="$message" class="mt-4"/>
    

# If Condition

        @if ($attributes->has('class'))
    <div>Class attribute is present</div>
@endif
    

# If Else Condition

        @if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif
    

# Foreach Condition

        <select name="version">
    @foreach ($product->versions as $version)
        <option value="{{ $version }}" @selected(old('version') == $version)>
            {{ $version }}
        </option>
    @endforeach
</select>
    

# Use Directive

        @use('App\Models\Flight')
    

Alpine.js

# Basic

        <div x-data="{ open: false, toggle() { this.open = ! this.open } }">
    <button @click="toggle()">Toggle Content</button>

    <div x-show="open">
        Content...
    </div>
</div>
    

# x-init

        <div
    x-data="{ posts: [] }"
    x-init="posts = await (await fetch('/posts')).json()"
>...</div>
    

# x-bind

        <div x-data="{ placeholder: 'Type here...' }">
    <input type="text" x-bind:placeholder="placeholder">
</div>
    

# x-bind Shorthand Syntax (In Laravel Blade)

        <div x-data="{ open: false }">
    <button x-on:click="open = ! open">Toggle Dropdown</button>

    <div ::class="open ? '' : 'hidden'">
        Dropdown Contents...
    </div>
</div>
    

# x-on

        <button x-on:click="alert('Hello World!')">Say Hi</button>
    

# x-on Shorthand Syntax

        <button type="button"
    @click="message = 'selected'"
    @click.shift="message = 'added to selection'"
    @mousemove.shift="message = 'add to selection'"
    @mouseout="message = 'select'"
    x-text="message"
>
</button>
    

# x-for

        <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>
    

# x-transition

        <div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
    >Hello 👋</div>
</div>
    

# x-ref

        <button @click="$refs.text.remove()">Remove Text</button>

<span x-ref="text">Hello 👋</span>