使用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>

Answer 1

你看过Google Code Prettify吗？

我已将它用于无数的代码显示和教程。 如果没有，请将其放在<pre></pre>标记之间。这将使HTML中的空格很重要，因此无论您在.html文件中输入什么，都会以等宽字体显示在网页上的输入

Answer 2

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

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

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