title: Styling a code block with CSS
body: <p>I'm writing a tutorial for my blog, and I'm using <code>[code][/code]</code> tags around the text I want to be displayed as code. I've tried replacing <code>[code]</code> with <code>&lt;code&gt;</code>, <code>&lt;pre&gt;</code> or <code>&lt;div class="code-block"&gt;</code></p>
  
  <p>However, with <code>&lt;code&gt;&lt;/code&gt;</code> if I indent some lines with spaces the spaces don't show up, so it's not as easy to read. For example</p>
  
  <pre><code>&lt;div id="example1"&gt;
  code which I would like indented
  &lt;/div&gt;
  
  &lt;div id="more-code1"&gt;
  more code
  &lt;/div&gt;
  </code></pre>
  
  <p>With <code>&lt;pre&gt;&lt;/pre&gt;</code> the spaces do show up okay, but it looks like this</p>
  
  <pre><code>&lt;div id="example2"&gt;
  
  code which I would like indented
  
  &lt;/div&gt;
  
  
  
  &lt;div id="more-code2"&gt;
  more code
  &lt;/div&gt;
  </code></pre>
  
  <p>If I do <code>&lt;div class="code-block"&gt;&lt;/div&gt;</code> it looks the same as using <code>code</code></p>
  
  <p>It could be to do with how I display the posts, so here's my PHP code</p>
  
  <pre><code>&lt;div class="box-content"&gt;
      &lt;p&gt;&lt;?php echo bbconvert(nl2br(htmlentities($post['content'], ENT_QUOTES))); ?&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>bbconvert()</code> is a simple function that replaces <code>[list]</code> with <code>&lt;ul&gt;</code> or <code>[row]</code> with <code>&lt;li&gt;</code></p>