Beefy Boxes and Bandwidth Generously Provided by pair Networks
Syntactic Confectionery Delight

Re: Stupid Code Block Trick Re: We Stylin'!

by mdillon (Priest)
on Feb 14, 2002 at 03:02 UTC ( #145351=note: print w/ replies, xml ) Need Help??

in reply to Stupid Code Block Trick Re: We Stylin'!
in thread We Stylin'!

Here's what I've got (keep in mind that I use the Dark Theme):

body { margin: 0px; font-family: sans-serif; } pre, tt { font-family: monospace; } a { text-decoration: none; } a:hover { background-color: cyan; color: #333; } pre > tt { display: block; color: green; background-color: #333; border: solid #888 1px; padding: 10px; width: 90%; margin-right: 0px; margin-left: auto; } input[type=submit], input[type=text], input[type=checkbox], input[type +=radio], select, textarea { border: solid #333 1px; } input[type=submit], input[type=text] { margin: 4px; }
This way, my CSS won't make just any <pre> look like code, only <pre><tt>. I don't want to see every use of preformatted whitespace as code. Since I am selecting <tt> (an inline element) inside of <pre>, the styles apply to the <tt>; hence, the "display: block;" part.

This code still suffers from the problem of mis-styling a <tt> used inside <pre> in cases like: <pre>blah blah blah, <tt>Typewriter</tt> <strong>power</strong></pre> (I know, It's contrived). However, this is because CSS can't select (or disallow) so-called "anonymous" elements (i.e. text chunks).

Or, you can just do it your way, which is fine.

Update: since I was having problems with the Everything Engine messing with my square and pointy brackets, I moved my CSS into an external file. I have updated the code block to reflect my latest CSS.

Comment on Re: Stupid Code Block Trick Re: We Stylin'!
Select or Download Code

Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://145351]
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others surveying the Monastery: (13)
As of 2014-08-21 14:50 GMT
Find Nodes?
    Voting Booth?

    The best computer themed movie is:

    Results (136 votes), past polls