php - 使用 CSS 样式化代码块

Question

我正在为我的博客编写教程，并且我在[code][/code]我想要显示为代码的文本周围使用标签。我试过[code]用<code>,<pre>或<div class="code-block">

但是，<code></code>如果我用空格缩进一些行，空格就不会出现，所以它不那么容易阅读。例如

<div id="example1">
code which I would like indented
</div>

<div id="more-code1">
more code
</div>

空格<pre></pre>确实显示得很好，但看起来像这样

<div id="example2">

code which I would like indented

</div>



<div id="more-code2">
more code
</div>

如果我这样做<div class="code-block"></div>，它看起来与使用相同code

这可能与我显示帖子的方式有关，所以这是我的 PHP 代码

<div class="box-content">
    <p><?php echo bbconvert(nl2br(htmlentities($post['content'], ENT_QUOTES))); ?></p>
</div>

bbconvert()是一个简单的函数，[list]用<ul>或[row]替换<li>

score 7 · Accepted Answer

我已经将它用于无数的代码展示和教程。如果没有，请将其放在<pre></pre>标签之间。这将使 HTML 中的空格变得重要，因此您在 .html 文件中键入的任何内容都将完全按照等宽字体在网页上键入的内容显示

score 4 · Accepted Answer

您需要<code>用标签包围元素<pre>，或者需要粘贴 .css 样式的 CSS 样式white-space: pre。在大多数情况下，这两件事应该是等价的。该pre设置意味着渲染器将保留空格而不是正常折叠它们，并且还会在换行符上换行。

例如，如果您选择<div class="code-block">，那么div.code-block { white-space: pre; }在您的 CSS 规则中应该会有所帮助。或者你可以去

<pre><code>
code which I would like indented
</code></pre>

2 回答 2