如何像Stack Overflow一样在Bootstrap+PHP网站安全展示代码？

嘿，我来帮你搞定这两个头疼的问题！作为经常折腾博客的人，这俩坑我也踩过，给你分享实用的解决方案：

这个问题核心是用户输入的HTML标签（比如<div>、<script>）被浏览器直接解析，破坏了Bootstrap的原有布局，得从后端入手做安全处理：

• 简单安全方案：用PHP的htmlspecialchars()转义特殊字符，把<、>、&这些容易搞事的字符转成HTML实体，浏览器只会显示字符本身，不会解析成标签：

  // 处理用户提交的评论内容
  $comment_content = htmlspecialchars($_POST['comment'], ENT_QUOTES, 'UTF-8');
  // 再把处理后的内容存入数据库
  

• 允许少量安全标签的方案：如果想让用户用<code>、<em>这类标签，用strip_tags()指定允许的标签，过滤掉其他危险标签：

  $allowed_tags = '<code><em><strong>';
  $comment_content = strip_tags($_POST['comment'], $allowed_tags);
  

• 更严谨的富文本方案：如果需要支持更多合法富文本，推荐用HTML Purifier库（直接下载本地引入就行，不用外链），它会自动过滤恶意标签，保留合规的HTML结构。

这部分要拆成两个小问题解决：

1. 避免截取字符时HTML标签未闭合 #

直接用substr()硬截字符串肯定会截断标签，导致页面错乱，得用DOM解析来安全截取：

function safe_truncate_html($html, $length = 300) {
    $dom = new DOMDocument();
    // 处理UTF-8编码，防止乱码
    @$dom->loadHTML('<?xml encoding="UTF-8">' . $html);
    $body = $dom->getElementsByTagName('body')->item(0);
    
    $current_length = 0;
    $result = '';
    
    foreach ($body->childNodes as $node) {
        if ($current_length >= $length) break;
        
        if ($node->nodeType === XML_TEXT_NODE) {
            $text = $node->nodeValue;
            $remaining = $length - $current_length;
            if (strlen($text) > $remaining) {
                $text = substr($text, 0, $remaining) . '...';
                $current_length += $remaining;
            } else {
                $current_length += strlen($text);
            }
            $result .= $text;
        } else {
            $node_html = $dom->saveHTML($node);
            $node_length = strlen(strip_tags($node_html));
            if ($current_length + $node_length > $length) {
                // 递归处理子节点，避免截断标签
                $result .= safe_truncate_html($node_html, $length - $current_length);
                $current_length = $length;
            } else {
                $result .= $node_html;
                $current_length += $node_length;
            }
        }
    }
    
    return $result;
}

// 使用示例：
$article_content = '你的文章原始HTML内容';
$truncated_content = safe_truncate_html($article_content, 300);

这个函数会遍历HTML节点，累计文本长度，截取到300字符时自动闭合所有未结束的标签，完全不会乱布局。

2. 自动识别代码并添加灰色背景（仿Stack Overflow） #

Stack Overflow是通过识别```包裹的代码块来渲染的，我们可以做类似处理：

后端处理（PHP）：识别代码块并转换为标准HTML #

function parse_code_blocks($content) {
    // 识别```语言 开头、```结尾的代码块，转换成带类名的pre+code
    $pattern = '/```(\w+)?\n([\s\S]*?)```/';
    $replacement = '<pre><code class="language-$1">$2</code></pre>';
    $content = preg_replace($pattern, $replacement, $content);
    
    // 给单独的<code>标签加Bootstrap风格的灰色背景样式
    $content = str_replace('<code>', '<code class="bg-secondary bg-opacity-10 p-2 rounded">', $content);
    
    return $content;
}

// 使用顺序：先处理代码块，再截取字符
$processed_content = parse_code_blocks($article_content);
$truncated_content = safe_truncate_html($processed_content, 300);

前端样式（贴合Stack Overflow风格） #

给代码块加灰色背景和适配的样式：

pre {
    background-color: #f6f8fa; /* Stack Overflow同款代码背景色 */
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
}

code {
    background-color: #f6f8fa;
    padding: 2px 4px;
    border-radius: 3px;
}

如果需要代码语法高亮，直接下载highlight.js的JS和CSS到本地（不用外链），然后初始化：

document.addEventListener('DOMContentLoaded', function() {
    hljs.highlightAll();
});

这样代码块不仅有灰色背景，还能像Stack Overflow一样高亮代码语法。

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