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 {
border:1px dashed #E1E1E1;
color:#333344;
background:#FAFAFA;
font-family:monospace;
overflow:auto;
font-size:11px;
padding:0.5em;
}
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..
5 Comments on this post
Leave a CommentI 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?
Comment left on 6.3.2008 by Isaac Marquez
Nice explanation.. never thought it would be so simple!
But.. is there also an easy way to give the code some colors?
Comment left on 8.27.2009 by Roald
Nice article but the code given does not actually deliver the same look as in your blog.
Comment left on 2.22.2010 by Fred
@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.
Comment left on 2.22.2010 by shakir
this is sick
Comment left on 2.26.2011 by james harken