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

Answer 2

You need to either surround the <code> elements with <pre> tags, or you need to paste on a CSS style of white-space: pre . Those two things should be equivalent in most cases. The pre setting means that the renderer will preserve the spaces instead of collapsing them as normal, and will break lines on newlines as well.

For example, if you choose <div class="code-block"> , then div.code-block { white-space: pre; } div.code-block { white-space: pre; } in your CSS rules should help. Or you could just go with

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