如何在Laravel中展示包含HTML代码片段的博客文章

我太懂你这个两难的痛点了——既要让普通正文段落正常换行展示，又要让代码块里的HTML标签原封不动显示，之前的两种方法确实顾此失彼。咱们一步步拆解解决：

问题根源分析 #

• 用{!! nl2br($post->body) !!}时，代码块里的<div>会被浏览器直接解析成HTML元素，而不是作为代码文本展示；
• 把整个内容套进<pre><code>里，又会让普通正文也变成代码格式，完全失去正常的段落排版。

解决方案：分块处理内容 #

核心思路是区分正文和代码块，分别针对性处理：对代码块内的HTML进行转义（让浏览器把它当成纯文本），对正文部分保留换行转<br>的逻辑，同时不破坏代码块的结构。

1. 创建自定义辅助函数 #

在你的Laravel项目里，新建（或修改）app/helpers.php文件，添加以下函数：

function format_post_body($body) {
    // 第一步：转义代码块内的HTML内容
    $codePattern = '/<pre><code class="lang-html">(.*?)<\/code><\/pre>/s';
    $body = preg_replace_callback($codePattern, function($matches) {
        // 把代码里的<、>等HTML字符转义成实体，避免被浏览器解析
        $escapedCode = htmlspecialchars(trim($matches[1]));
        return "<pre><code class='lang-html'>{$escapedCode}</code></pre>";
    }, $body);

    // 第二步：对非代码块的正文应用nl2br处理换行
    $contentParts = preg_split('/(<pre.*?<\/pre>)/s', $body, -1, PREG_SPLIT_DELIM_CAPTURE);
    $formattedContent = '';
    
    foreach ($contentParts as $part) {
        if (str_starts_with($part, '<pre')) {
            // 代码块直接保留原样，不处理换行
            $formattedContent .= $part;
        } else {
            // 正文部分把换行转成<br>，保证段落排版
            $formattedContent .= nl2br($part);
        }
    }

    return $formattedContent;
}

如果之前没注册过辅助文件，记得在composer.json里添加：

"autoload": {
    "files": [
        "app/helpers.php"
    ]
}

然后运行composer dump-autoload让Laravel加载这个文件。

2. 在Blade视图中使用函数 #

把原来的{!! nl2br($post->body) !!}替换成：

{!! format_post_body($post->body) !!}

3. 确保PrismJS正常高亮 #

如果你的PrismJS是页面加载时初始化的，动态渲染内容后需要手动触发高亮：

// 页面加载完成后或内容更新后调用
Prism.highlightAll();

这样处理后，普通正文会正常换行展示，代码块里的<div>test</div>会原封不动以代码形式显示，同时PrismJS也能正常识别代码块进行语法高亮。

内容的提问来源于stack exchange，提问作者Gass