Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl Monk, Perl Meditation

Stupid Code Block Trick Re: We Stylin'!

by Masem (Monsignor)
on Feb 13, 2002 at 16:16 UTC ( #145190=note: print w/replies, xml ) Need Help??

in reply to We Stylin'!

I've grown fond of having code blocks highlighted at other sites, and now I can do it here. Currently, CODE blocks that aren't inline get <pre><tt>...</tt></pre> wrapped, while inline ones get <tt>...</tt> (no pre's). Thus, I've got this in my CSS:
PRE { background-color: #FFFF80; border: thin black solid; padding: 5px; }
Now all my code blocks show up as boxed text on light yellow, nice and easy to follow between text and code.

Dr. Michael K. Neylon - || "You've left the lens cap of your mind on again, Pinky" - The Brain
"I can see my house from here!"
It's not what you know, but knowing how to find it if you don't know that's important

Replies are listed 'Best First'.
Re: Stupid Code Block Trick Re: We Stylin'!
by mdillon (Priest) on Feb 14, 2002 at 03:02 UTC
    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.

Log In?

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

How do I use this? | Other CB clients
Other Users?
Others cooling their heels in the Monastery: (6)
As of 2020-10-29 22:35 GMT
Find Nodes?
    Voting Booth?
    My favourite web site is:

    Results (274 votes). Check out past polls.