Styling a code block with CSS

Question

I'm writing a tutorial for my blog, and I'm using [code][/code] tags around the text I want to be displayed as code. I've tried replacing [code] with <code>, <pre> or <div class="code-block">

However, with <code></code> if I indent some lines with spaces the spaces don't show up, so it's not as easy to read. For example

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

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

With <pre></pre> the spaces do show up okay, but it looks like this

<div id="example2">

code which I would like indented

</div>



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

If I do <div class="code-block"></div> it looks the same as using code

It could be to do with how I display the posts, so here's my PHP code

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

bbconvert() is a simple function that replaces [list] with <ul> or [row] with <li>

Answer 1

Have you taken a look at Google Code Prettify?

I've used it for countless code displays and tutorials. If not, put it between <pre></pre> tags. This will make whitespace matter in the HTML, so whatever you type in the .html file will show up exactly as typed on the webpage in a monospace font