CSS for code block


If you're wondering how do I actually get the nicely boxed code block in my blog as this;

 

then the answer to it is just to have this in my CSS:

pre {
        padding: 10px 15px;
        margin: 5px 0 15px;
        border-left: 5px solid #666666;
        background: #222222;
        font: 1em/1.5 "Courier News", monospace;
        color: #bbbbbb;
        overflow : auto;
}

and later I would just wrap whatever text I want to be in the box with the pre tag in my HTML codes, like this;

<pre>
This is a code example
</pre>

and should get this output (including the dashed-box):

This is a code example

and that's all. It's just so easy..


Tags:

4 Responses to “CSS for code block”

I am producing a DVD. It is my understanding that CSS will prevent unauthorized duplications. Is this correct? If not, how can i prevent unauthorized duplications?

Nice explanation.. never thought it would be so simple!
But.. is there also an easy way to give the code some colors?

Nice article but the code given does not actually deliver the same look as in your blog.

@Isaac Marquez: That's another type of CSS (Content Scramble System). This one stands for Cascading Style Sheet

@Roald: Sure, just change the value in color:

@Fred: I've updated my code snippet. I updated my code but forgot to update my blog post, my bad.


Leave a Reply

Advertisement