@verbatim 是 Laravel Blade 模板引擎中的一个特殊指令，用于告诉 Blade 不要解析指定块内的任何 Blade 语法，直接原样输出。

为什么需要 @verbatim？

当你在 Blade 模板中需要输出包含大量 {{ }} 或 @ 符号的内容（如 JavaScript 框架模板）时，Blade 会尝试解析这些内容，可能导致错误。这时可以使用 @verbatim 指令。

基本语法

@verbatim
    // 这里的内容不会被 Blade 解析
    {{ this will be output as is }}
    @if(this too)
@endverbatim

使用示例

1. 保护 JavaScript 框架代码

<div>
    <h1>Vue.js 示例</h1>
    
    @verbatim
    <div id="app">
        <p>{{ message }}</p>  <!-- 这里不会被 Blade 解析 -->
        <button @click="reverseMessage">反转消息</button>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
    @endverbatim
</div>

2. 输出包含 Blade 语法的示例代码

<div>
    <h2>Blade 语法示例</h2>
    
    @verbatim
    <pre>
    <!-- Blade 条件语句示例 -->
    @if($user->isAdmin())
        <p>管理员用户</p>
    @else
        <p>普通用户</p>
    @endif
    
    <!-- Blade 循环示例 -->
    @foreach($users as $user)
        <p>{{ $user->name }}</p>
    @endforeach
    </pre>
    @endverbatim
</div>

3. 保护 JSON-LD 结构化数据

<head>
    @verbatim
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "{{ article.title }}",
        "author": {
            "@type": "Person",
            "name": "{{ article.author.name }}"
        },
        "datePublished": "{{ article.published_at }}",
        "description": "{{ article.excerpt }}"
    }
    </script>
    @endverbatim
</head>

替代方案

使用 @ 符号转义

对于少量的 Blade 语法，可以使用 @ 符号进行转义：

<!-- 转义单个 Blade 表达式 -->
@@if($condition)  <!-- 输出为 @if($condition) -->

<!-- 转义双花括号 -->
@{{ $variable }}  <!-- 输出为 {{ $variable }} -->

对比示例

<!-- 方法1: 使用 @verbatim (适合大量内容) -->
@verbatim
    <div>
        {{ name }}
        @if(condition)
            <span>内容</span>
        @endif
    </div>
@endverbatim

<!-- 方法2: 使用转义 (适合少量内容) -->
<div>
    @{{ name }}
    @@if(condition)
        <span>内容</span>
    @@endif
</div>

实际应用场景

1. 文档网站展示代码示例

<!-- documentation.blade.php -->
<div class="example">
    <h3>Blade 循环示例</h3>
    
    @verbatim
    <div class="code-example">
        <!-- 展示 Blade 代码 -->
        <pre><code>
@foreach($products as $product)
    <div class="product">
        <h4>{{ $product->name }}</h4>
        <p>价格: ${{ $product->price }}</p>
    </div>
@endforeach
        </code></pre>
    </div>
    @endverbatim
    
    <div class="live-example">
        <!-- 实际执行的 Blade 代码 -->
        @foreach($products as $product)
            <div class="product">
                <h4>{{ $product->name }}</h4>
                <p>价格: ${{ $product->price }}</p>
            </div>
        @endforeach
    </div>
</div>

2. Vue/React/Angular 组件

<!-- vue-component.blade.php -->
@verbatim
<div id="vue-app">
    <todo-list>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        ></todo-item>
    </todo-list>
</div>

<script>
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})
</script>
@endverbatim

3. 包含 Mustache/Handlebars 模板

<!-- email-template.blade.php -->
@verbatim
<script id="email-template" type="text/x-handlebars-template">
    <div class="email">
        <h1>{{ subject }}</h1>
        <p>亲爱的 {{ recipientName }},</p>
        <p>{{ messageBody }}</p>
        {{#if hasAttachment}}
            <p>请查看附件。</p>
        {{/if}}
    </div>
</script>
@endverbatim

注意事项

  1. 不能嵌套使用：@verbatim 指令不能嵌套

  2. 性能考虑：大量使用 @verbatim 可能会轻微影响性能

  3. 与其他指令配合：在 @verbatim 块内，所有 Blade 指令都不会被解析

  4. PHP 代码依然执行：@verbatim 只阻止 Blade 解析，PHP 代码依然会执行

@php
    $message = "Hello World";
@endphp

@verbatim
    <!-- 这里 $message 不会被 Blade 解析 -->
    {{ $message }}  <!-- 输出为: {{ $message }} -->
    
    <!-- 但 PHP 变量仍然可以访问（通过纯 PHP） -->
    <?php echo $message; ?>  <!-- 输出为: Hello World -->
@endverbatim

总结

@verbatim 指令是处理 Blade 模板中需要原样输出的内容的理想工具，特别适用于：

  • 前端 JavaScript 框架模板

  • 展示 Blade/PHP 代码示例

  • 包含大量特殊符号的脚本或样式

  • JSON-LD 或其他结构化数据格式

对于简单的需求，使用 @ 符号转义可能更合适；但对于大段的、包含多种 Blade 语法的内容，@verbatim 指令是更清晰、更便捷的选择。